remove validations dynamically using angular JS

Question

Am creating a web application. It has a form with 5 mandatory input fields.It has 2 buttons. 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?

You could probably call a function inside the ng-required and use a flag to determine whether it's a save or save for later action. In this case you should be able to handle the validation however you like. — Raul A.
– Raul A., Commented Jul 18, 2016 at 7:50

prabhakaran S · Accepted Answer · 2016-07-18 09:02:44Z

1

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;
}}

answered Jul 18, 2016 at 9:02

prabhakaran S

7281 gold badge7 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ScottL · Accepted Answer · 2016-07-18 07:42:37Z

0

See ng-required.

The directive sets the required attribute on the element if the Angular expression inside ngRequired evaluates to true.

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>

answered Jul 18, 2016 at 7:42

ScottL

1,75511 silver badges7 bronze badges

3 Comments

Ramya Over a year ago

Thanks Scott. Will try this.

Ramya Over a year ago

tried the same code with 2 buttons. By clicking on save for later, tried to change the required value to false. Didnt work. Can you please help? angular.module('ngRequiredExample',[]) .controller('ExampleController',laterSave); function laterSave($scope){ $scope.required = false; }

ScottL Over a year ago

Can you create a plunker or similar code example that I can run to see what you are doing?

Collectives™ on Stack Overflow

remove validations dynamically using angular JS

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related