Javascript 角度表单验证无法正常工作

Angular form validation not working properly

提问by Keshav

I have created a form in ionic-angular and applied validations on it.Validations are not working properly.Even all the fields are empty on click of submit button it calls controller function. Please help me to solve this issue.

我在 ionic-angular 中创建了一个表单并对其应用了验证。验证无法正常工作。即使单击提交按钮时所有字段都是空的，它调用控制器功能。请帮我解决这个问题。

html code

html代码

<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Register</h1>
</ion-header-bar>
<ion-content >
<form name="register"  ng-submit="submitDetails(user)" novalidate=""> 
    <div class="list">
        <label class="item item-input item-floating-label" style="position:relative;">
            <span class="input-label">First Name</span>
            <input type="text" placeholder="First Name" ng-model="user.firstName" ng-required="true">
            <p ng-show="user.firstName.$invalid && !user.firstName.$pristine" class="help-block">You name is required.</p>
        </label>
        <label class="item item-input item-floating-label">
            <span class="input-label">Email</span>
            <input type="email" placeholder="Email" ng-model="user.email" ng-required="true">
            <p ng-show="user.email.$invalid && !user.email.$pristine" class="help-block">Enter a valid email</p>
        </label>
        <label class="item item-input item-floating-label">
            <span class="input-label" >Phone no</span>
            <input type="number" placeholder="Phone No" ng-model="user.phone" ng-minlength="10" ng-maxlength="10" ng-required="true">
            <span class="help-block" ng-show="user.phone.$error.required || user.phone.$error.number">Valid phone number is required</span>
            <span class="help-block" ng-show="((user.phone.$error.minlength || user.phone.$error.maxlength) && user.phone.$dirty) ">phone number should be 10 digits</span>
        </label>
        <input type="submit" class="button button-royal"  value="register">
    </div>
</form>
</ion-content>
</ion-pane>

Controller code

控制器代码

chatApp.controller('RegisterCntrl', function($scope, $stateParams) {
    $scope.user={};
    $scope.submitDetails=function(user){
        alert("user"+user.firstName);
    };
});

采纳答案by Medet Tleukabiluly

This should work

这应该工作

<form name="register_form"  ng-submit="submitDetails(user)" novalidate=""> 
    <div class="list">
        <label class="item item-input item-floating-label" style="position:relative;">
            <span class="input-label">First Name</span>
            <input type="text" name="user_first_name" placeholder="First Name" ng-model="user.firstName" ng-required="true">
            <p ng-show="register_form.user_first_name.$invalid && !register_form.user_first_name.$pristine" class="help-block">You name is required.</p>
        </label>
        <!--omitted-->
        <input type="submit" class="button button-royal"  value="register">
    </div>
</form>

Form name is register_form,

表格名称是register_form，

<form name="register_form"  ng-submit="submitDetails(user)" novalidate="">

Input name is user_first_name,

输入名称是user_first_name，

<input type="text" name="user_first_name" placeholder="First Name" ng-model="user.firstName" ng-required="true">

So validation must pass through those fields

所以验证必须通过这些字段

  <p ng-show="register_form.user_first_name.$invalid && !register_form.user_first_name.$pristine" class="help-block">You name is required.</p>

Model itself doesn't have $invalidor $pristineproperties, so it doesn't make sense

模型本身没有$invalid或$pristine属性，所以没有意义

For phone field

电话领域

<input type="number" name="user_phone" placeholder="Phone No" ng-model="user.phone" ng-minlength="10" ng-maxlength="10" ng-required="true">
<span class="help-block" ng-show="register_form.user_phone.$error.required || register_form.user_phone.$error.number">Valid phone number is required</span>
<span class="help-block" ng-show="((register_form.user_phone.$error.minlength || register_form.user_phone.$error.maxlength) && register_form.user_phone.$dirty) ">phone number should be 10 digits</span>

For further readings, checkout this answer

如需进一步阅读，请查看此答案

回答by Shiju K Babu

Use the form nameand input nameattribute, not ng-model

使用form nameandinput name属性，而不是ng-model

Give the input a name and use it with form name.

为输入命名并与表单名称一起使用。

Check the first input in following example.

检查以下示例中的第一个输入。

<label class="item item-input item-floating-label" style="position:relative;">
    <span class="input-label">First Name</span>
    <input name="firstName" type="text" placeholder="First Name" ng-model="user.firstName" ng-required="true">
    <p ng-show="register.firstName.$invalid && !register.firstName.$pristine" class="help-block">Your name is required.</p>
</label>