Angular ng-required

Question

I've got my FormGroup with some FormControles and all of them are required but I want two of my FormControles only to be required if a boolean in my component.ts is true I tried ng-required="myboolean" but this didnt work. Is there a way to do this or a Workaround?

//edit

onButtonClick()
  {
    this.passwordFormControl = !this.passwordFormControl;

    if(this.passwordFormControl)
    {
      this.passwortButton = "Cancle change Password";
      this.benutzerAnlageForm.get('password').setValidators(Validators.required);
    }
    else
    {
      this.passwortButton = "Change password";
      this.benutzerAnlageForm.get('password').clearValidators();
    }
  }

 <form [formGroup]="MyForm" (ngSubmit)="onMyForm()">

  <div *ngIf="passwordFormControl" class = "form-group">
      <label for="password">Password</label>
      <input formControlName="password" type="password" id="password" 

 <-- Some more Form Controles that are always required -->

  <button type="submit" [disabled]="!MyForm.valid" class ="btn btn-primary">Save</button>
  <button *ngIf="edit" type="button" class="btn btn-primary" (click)="onButtonClick()">{{passwortButton}}</button>
  </form>

The Password FormControl is the Control I dont always want to be required. The Problem is if I remove the required from the password FormControl the Form itself and the Button doesnt seem to recognize that the form is now valid again.

https://stackoverflow.com/questions/39955807/angular-2-ng-required — Ramesh Rajendran, Dec 27 '17 at 10:39

Vinod Bhavnani · Accepted Answer · 2017-12-27T11:01:45.310

8

ng-required is for AngularJs that is 1.x. For Angular or Angular 2+ You can do this:

<input [required]="myboolean">

You can also do it dynamically in your component.ts when your boolean value changes, like this:

this.form.get('control-name').setValidators(Validators.required);
this.form.get('control-name').updateValueAndValidity();

To remove:

this.form.get('control-name').clearValidators();
this.form.get('control-name').setValidators(/*Rest of the validators if required*/);
this.form.get('control-name').updateValueAndValidity();

edited Dec 27 '17 at 11:01

answered Dec 27 '17 at 10:34

Vinod Bhavnani

2,185
1
16
19

If i use the second suggestion how do I remove the Validator? So basically I have to set or remove it on button click. On first click I set it required and on the second click I remove the required – Kajot Dec 27 '17 at 10:49
clearValidators will remove all validations. Then you can again set the rest of the validations except required if you need to – Vinod Bhavnani Dec 27 '17 at 10:54
na not working... So at the beginning the control has no required. First Button Click --> Control gets the required attribute second Button Click --> Control still has the required attribute Why? – Kajot Dec 27 '17 at 10:55
Can you update your code to show me how you are clearing validations? – Vinod Bhavnani Dec 27 '17 at 10:56
this.form.get('control-name').updateValueAndValidity(); that was missing its working now ty – Kajot Dec 27 '17 at 11:07
Can you please select my answer then? Thanks – Vinod Bhavnani Dec 27 '17 at 11:08

score 0 · Answer 2 · answered Jun 17 '19 at 07:48

// To add validation     
   this.myForm.controls.controlName.setValidators(Validators.required);

// To clear validation
   this.updateForm.controls.controlName.clearValidators();

// In either case, call this method
   this.updateForm.controls.controlName.updateValueAndValidity();

Angular ng-required

2 Answers2