简体   繁体   English

使用角度JS动态删除验证

[英]remove validations dynamically using angular JS

Am creating a web application. 我正在创建一个Web应用程序。 It has a form with 5 mandatory input fields.It has 2 buttons. 它具有5个必填输入字段的表单,具有2个按钮。 One is submit & another one is save for later. 一个是提交,另一个则保存供以后使用。 When I click on submit, the form should validate all the mandatory fields & save the input given by the user. 当我单击“提交”时,该表单应验证所有必填字段并保存用户提供的输入。 This is working fine for me. 这对我来说很好。

When I click on "save for later", only the first input field should be mandatory. 当我单击“稍后保存”时,仅第一个输入字段应为必填项。 All other fields should be changed as optional. 所有其他字段应更改为可选。 How to achieve this using angular js? 如何使用angular js实现此目的?

View 视图

<form name="Form" ng-controller="testController">
<input name="input" type="text" id="txtName" ng-model="Name" class="form-control" required>
<select ng-model="state" ng-options="s for s in stateList" id="state" ng-change="stateOnChange()" class="form-control"></select>
<input name="input" type="text" id="txtstate" ng-model="pincode" class="form-control" required>
<input name="input" type="text" id="txtplace" ng-model="place" class="form-control" ng-required={{isRequired}}>
<button type="submit" class="btn btn-success" ng-submit="saveAction();">Save</button>

Angular Controller 角度控制器

$scope.isRequired = false;
$scope.stateOnChange = function () {
if ($scope.state == "TN") {
    $scope.isRequired = true;
}
else {
    $scope.isRequired = false;
}}

See ng-required . 参见ng-required

The directive sets the required attribute on the element if the Angular expression inside ngRequired evaluates to true. 如果ngRequired中的Angular表达式的值为true,则指令将在元素上设置required属性。

Example below: 下面的例子:

 angular .module('exampleApp', []) .controller('ExampleController', ExampleController); function ExampleController() { var vm = this; vm.required = false; } 
 <!DOCTYPE html> <html ng-app='exampleApp'> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script> </head> <body ng-controller="ExampleController as vm"> <form name="vm.form"> <label for="required">Toggle required:</label> <input type="checkbox" ng-model="vm.required" id="required" /> <br> <label for="input">This input must be filled if `required` is true:</label> <input type="text" ng-model="model" id="input" name="input" ng-required="vm.required" /> <br> <p>required status: {{vm.required}}</p> <p>form error: {{vm.form.input.$error}}</p> </form> </body> </html> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM