现在真正的好戏上演了。我们开始使用Angular的属性 。首先让我们禁用我们的提交按钮。如果我们的表单是$invalid的，我们只想禁用它。
<!-- index.html --> ... <!-- SUBMIT BUTTON --> <button type="submit" ng-disabled="userForm.$invalid">Submit</button> ...
只使用一点代码（ng-disabled），如果我们的表单是$invalid的，表单按钮将被禁用。
这意味着，我们的name input 字段是必需的，并且email input字段需要一个有效的电子邮件。
用 eng-show显示错误信息
ng-valid 和ng-invalid 会基于提供的表单规则自动验证输入的有效性.
咱们在输入部分加一些错误信息，只要不等于$valid或是已经使用过的就行 (不能展示还没使用).
<!-- index.html --> ... <!-- NAME --> <div> <label>Name</label> <input type="text" ng-model="name" required> <p ng-show="userForm.name.$invalid && !userForm.name.$pristine">You name is required.</p> </div> <!-- USERNAME --> <div> <label>Username</label> <input type="text" ng-model="user.username" ng-minlength="3" ng-maxlength="8"> <p ng-show="userForm.username.$error.minlength">Username is too short.</p> <p ng-show="userForm.username.$error.maxlength">Username is too long.</p> </div> <!-- EMAIL --> <div> <label>Email</label> <input type="email" ng-model="email"> <p ng-show="userForm.email.$invalid && !userForm.email.$pristine">Enter a valid email.</p> </div> ...
就像这样 Angular 会根据规则来验证输入部分的$invalid 和 $pristine properties属性从而决定是否显示错误信息.
格局类
Angular在验证输入或表单时的有效有否是已经提供了一些类，像是 (ng-valid,ng-invalid,ng-pristineandng-dirty).
你可以编辑自己喜欢的CSS . 你可以私有定制化这些类来实现特定的场景应用.
.ng-valid { } .ng-invalid { } .ng-pristine { } .ng-dirty { } /* really specific css rules applied by angular */ .ng-invalid-required { } .ng-invalid-minlength { } .ng-valid-max-length { }
使用 ng-class 根据条件添加类
因为我们使用了 Bootstrap, 我们将就使用它们提供的类(has-error). 这样就能围绕我们的form-group获得漂亮的错误信息和颜色.
ng-class 允许我们基于一个表达式添加类. 在这种情况下，我们想要想我们的form-group添加一个 has-error 类，如果输入框的状态是$invalid或者不是pristine的话.
其工作的方式是 ng-class="{ <class-you-want> : <expression to be evaluated > }". 更多的信息，请读一读 Angular ngClass 文档吧.
<!-- index.html --> ... <!-- NAME --> <div ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }"> <label>Name</label> <input type="text" ng-model="user.name" required> <p ng-show="userForm.name.$invalid && !userForm.name.$pristine">You name is required.</p> </div> <!-- USERNAME --> <div ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }"> <label>Username</label> <input type="text" ng-model="user.username" ng-minlength="3" ng-maxlength="8"> <p ng-show="userForm.username.$error.minlength">Username is too short.</p> <p ng-show="userForm.username.$error.maxlength">Username is too long.</p> </div> <!-- EMAIL --> <div ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }"> <label>Email</label> <input type="email" ng-model="user.email"> <p ng-show="userForm.email.$invalid && !userForm.email.$pristine">Enter a valid email.</p> </div> ...
现在我们的表单就有了恰当的Bootstrap错误类.
只在提交表单后显示错误信息