Javascript Angularjs表单验证仅在表单字段中进行更改时有效

Javascript Angularjs表单验证仅在表单字段中进行更改时有效,javascript,android,angularjs,validation,ionic-framework,Javascript,Android,Angularjs,Validation,Ionic Framework,我正在尝试使用angularjs实现表单验证。当用户开始在表单字段中进行更改时,验证工作正常。但如果单击“提交”而不输入任何内容,则不会显示任何错误消息。下面是代码 <form name="myform" ng-submit="register(user)" > <div class="list "> <label class="item item-input item-stacked-label">

我正在尝试使用angularjs实现表单验证。当用户开始在表单字段中进行更改时,验证工作正常。但如果单击“提交”而不输入任何内容,则不会显示任何错误消息。下面是代码

<form name="myform" ng-submit="register(user)" >
        <div class="list ">
            <label class="item item-input item-stacked-label">
                <span class="input-label">Name</span>
                <input type="text" placeholder="John Watson" ng-model="user.name" name="user_name" required>
                <span style="color:red;" ng-show="myform.user_name.$dirty&&myform.user_name.$error.required">Name required</span>
            </label>
            <label class="item item-input item-stacked-label">
                <span class="input-label">Mobile Number</span>
                <input type="tel" ng-minlength="10"  maxlength="10" ng-model="user.mobileno"  placeholder="77777777" name="user_mobileno"  required>
                <span style="color:red;" ng-show="myform.user_mobileno.$dirty&&myform.user_mobileno.$error.minlength">Please provide a valid mobileNo</span>
            </label>
            <label class="item item-input item-stacked-label">
                <span class="input-label">Service Provider</span><br><br>
                <select class="clearfix" style="width:100%; height:30px;" ng-model="user.svp_name" name="user_svp_name" required>
                    <option value="">Select one </option>
                    <option value="xxxx">xxxx</option>
                    <option value="xxxx">xxx</option>

                </select><br><br>
                <span style="color:red;" ng-show="myform.user_svp_name.$dirty&&myform.user_svp_name.$error.required">Select your service provider</span>
            </label>
            <label class="item item-input item-stacked-label">
                <span class="input-label">Email Id</span>
                <input type="email" ng-model="user.email" placeholder="john@example.com" name="user_email" required>
                <span style="color:red;" ng-show="myform.user_email.$dirty&&myform.user_email.$error.email">Please Provide a valid emailId</span>
            </label>

        </div>
        <div style="padding:0 10px;">
            <input type="submit"   class="button button-balanced button-block buttonradius" value="Register" />
        </div><br /><br />
        </form>

名称
所需名称
手机号码
请提供有效的手机号码
服务提供商

选择一个 xxxx xxx

选择您的服务提供商 电子邮件Id 请提供有效的电子邮件ID

我已经提到了这些问题(), () ,但是没有帮我

更新 最后我找到了一个解决方案,但它并没有像我预期的那样工作

<span style="color:red;" ng-show="submitted&&myform.user_name.$error.required">Name required</span>
<input type="submit" ng-click="submitted=true" class="button button-balanced button-block buttonradius" value="Register" />
需要名称
但仅在
name
serviceprovider
字段中工作(如果单击submit而不输入任何内容,则显示错误消息),而不在其他两个字段(mobileno、email)中工作

控制器:

$scope.register = function(user) {
  if ($scope.myForm.$invalid) {
    // Form is invalid
    $scope.failed = true;
    return;
  }
  delete $scope.failed;


  // Other submission logic
};

你能在Chrome或其他浏览器中复制相同的内容吗?我已经在Phone中进行了测试。如何检查表单是否正确invalid@Root哎呀!我更新了我的答案。您也可以将myForm.$invalid放入ng show,但这样它只会在有人试图提交您的表单后显示错误消息,而不是在加载表单时立即显示。这是我尝试的
失败(&myForm.user\u name.$error.required&&myForm.user\u name.$invalid
但没有work@Root保持简单。你真的需要这些和(&&)吗。按照编写方式,所有三个条件都必须为真才能显示错误消息。你确定那是对的吗?
<span style="color:red;" ng-show="failed && myform.user_name.$error.required">Name required</span>
$scope.register = function(user) {
  if ($scope.myForm.$invalid) {
    // Form is invalid
    $scope.failed = true;
    return;
  }
  delete $scope.failed;


  // Other submission logic
};