AngularJS材质验证不起作用

时间:2018-06-19 13:48:06

标签: angularjs angularjs-material

我是Angular JS的新手。我正在使用Angular JS物料表单,并且需要向该表单添加验证。我已经尝试过如下验证。但是,当用户向文本框中添加内容时,仍然会显示错误消息。清除输入后,它仍然显示该消息。我也尝试了ng-show。也 我想禁用“提交”按钮,直到所有字段都填满,有人可以帮我解决这个问题。

<form name="userForm">
  <div layout="column">
    <md-input-container>
      <label>Name</label>
        <input type="text" name="name" ng-model="model.name" required>
          <div ng-messages="userForm.name.$error" ng-if="userForm.name.$dirty">
            <div ng-message="required">
                Your name is required.
            </div>
          </div>
    </md-input-container>

    <md-input-container>
      <label>Property Owner Contact Address</label>
          <input type="text" name="ownerContactAddress" ng-model="model.ownerContactAddress" required>
            <div ng-messages="userForm.ownerContactAddress.$error" ng-if="userForm.ownerContactAddress.$dirty">
              <div ng-message="required">
                  Your address is required.
              </div>
            </div>
    </md-input-container>


    <md-input-container>
      <label>Property Owner Email</label>
          <input type="ownerEmail" ng-model="model.ownerEmail" name="email" required>
            <div ng-messages="userForm.ownerEmail.$error" ng-if="userForm.email.$dirty">
              <div ng-message="userForm.ownerEmail.$invalid">
                Enter a valid email.
              </div>
            </div>
     </md-input-container>

     <md-button 
          class="md-raised md-primary"
          ng-click="$modelHomeController.onSubmitClick(model)">
          Submit</md-button>

   </div>
</form>

0 个答案:

没有答案