Remove validators from form control Angular 6

remove validators angular 6
remove validators angular 6 dynamically
updatevalueandvalidity angular 6 example
how to dynamically add and remove form fields in angular 6
angular 6 conditional validation reactive forms
dynamically adding or removing form control validators in reactive form
radio button validation in angular 6 reactive form
angular custom validator

I have a form with a lot of form controls and Validators for some of the controls, like:

title = new FormControl("", Validators.compose([
    Validators.required
]));
description = new FormControl("", [
    Validators.required,
    Validators.minLength(1),
    Validators.maxLength(2000)
]);

How do I add a save as draft button that does not validate the controls? Or remove them?

I have tried a lot of examples such as:

saveDraft() {
   this.addProjectForm.controls.title.clearValidators();
   this.addProjectForm.controls.title.setErrors(null);
   this.addProjectForm.controls.title.setValidators(null);
}

or

saveDraft() {
   this.addProjectForm.controls['title'].clearValidators();
   this.addProjectForm.controls['title'].setErrors(null);
   this.addProjectForm.controls['title'].setValidators(null);
}

but nothing works..

I have implemented quite a lot of forms with this Save As Draft functionality.

What I generally do is, just keep the Submit Button as disabled unless the form is valid. But keep the Save as a Draft button as always enabled.

What this allows me to do is, save the contents of the form without applying any validation in case the user clicks the Save as Draft button.

The user can not click the Save button anyway as the form is not valid.

All of this translates to code like this:

<div class="image-flip">
  <div class="mainflip">
    <div class="frontside">
      <div class="card">
        <div class="card-body add-generic-card">

          <form [formGroup]="addGameForm">
            ...

            <div class="draft-publish-button">
              <button 
                class="..." 
                type="button" 
                (click)="onFormSubmit('DRAFT')">
                  Save as Draft
              </button>

              <button 
                class="..." 
                type="button" 
                (click)="onFormSubmit('PUBLISHED')" 
                [disabled]="addGameForm.invalid">
                  Publish
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

Remove validators from form control Angular 6, I have implemented quite a lot of forms with this Save As Draft functionality. What I generally do is, just keep the Submit Button as disabled  Every time the value of a form control changes, Angular runs validation and generates either a list of validation errors that results in an INVALID status, or null, which results in a VALID status. You can then inspect the control's state by exporting ngModel to a local template variable.

Try this:

this.addProjectForm.get('title').setValidators([]); // or clearValidators()
this.addProjectForm.get('title').updateValueAndValidity();

If you want to add a validator then append array of validators:

this.addProjectForm.get('title').setValidators([Validators.required]);
this.addProjectForm.get('title').updateValueAndValidity();

Note: You have to use updateValueAndValidity() after each change

Form validation, How do you dynamically add and remove form fields in angular 5? The app component defines the form fields and validators for our registration form using an Angular FormBuilder to create an instance of a FormGroup that is stored in the registerForm property. The registerForm is then bound to the form in the template below using the [formGroup] directive.

You can try following as another solution if you want to remove validator from your field:

public saveDraft(): void {
   this.addProjectForm.get('title').clearValidators();
   this.addProjectForm.get('title').updateValueAndValidity();
}

Angular 6, control model in the component class. Angular then calls these functions whenever the value of the control changes. Here, we have a FullName form control in the following example. this.employeeForm = this.fb.group({fullName: [”, [Validators.required, Validators.minLength(2), Validators.maxLength(10)]],}); The creating a form control. so, we specify a key-value pair. The key is the name of the form control and value is an array of the first element.

I have tried all of above, But for me following code has worked.

let formControl : FormControl = this.formGroup.get("mouldVendor") as FormControl;
formControl.clearValidators();
formControl.setValidators(null);
formControl.updateValueAndValidity();

Three Ways to Dynamically Alter your Form Validation in Angular, Disable the Control. This option is the least known one and also my favorite. When we mark a control as disabled , Angular excludes its value and  As far as I can tell, it is not possible to modify the Validators on a Form Control after it has been created. Currently to do this, the control has to be destroyed and recreated with the desired validators, but it also requires copying the old control state to the new control.

I found that the best solution is not to have any validation on the input fields (form controls) and then add this code to allow the submit button to be pressed:

ngAfterViewInit() {
this.addProjectForm.valueChanges.subscribe(data => {
  //console.log(data)

  if(data.title.length != 0 &&
    data.description.length != 0 &&
    data.ddemployees.length != 0 &&
    data.competences.includes(true) &&
    data.methods.includes(true) &&
    data.enddate.length != 0 &&
    data.contactname.length != 0 &&
    data.contactemail.length != 0 &&
    data.contactphonenumber.length != 0 
    ) {
    //console.log(data.title.length)
    this.allowSubmit = true;
  } 
});

}

Add and Remove Validators from FormControl · Issue #6824 , Add and Remove Validators from FormControl #6824 angular-automatic-lock-​bot bot locked and limited conversation to collaborators on Sep  Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.

reactive form dynamic form validation add and remove , reactive form dynamic form validation add and remove User_Type}}</ng-option​> </ng-select> </div> <div class="col-sm-6 Form_Select" Form = new FormGroup({ User_Type: new FormControl(null, angular-automatic-lock-bot bot locked and limited conversation to collaborators on Sep 13, 2019. I am using reactive forms in Angular 4. this.form.controls.code.clearValidators(); The above method only clears the validators on the form and if there are any errors previously set on the control are not cleared which results in failing validations when I put check if it has errors.

Dynamically adding or removing form control validators in reactive , Dynamically adding or removing form control validators in reactive form. kudvenkat. Loading Duration: 11:15 Posted: Oct 15, 2018 FormControl is used to create a form of control from the component class and Validators is used to validate that control using different types of validations attributes. You can see with the following code, how we create a control as 'email' and add the four different types of validations like required validation, minlength validation

Angular Validators With Conditional Validation In Reactive Forms , How to create basic Angular forms; How to use Angular validators with Angular reactive The idea is still the same even if you choose to use the FormControl or any other We can then remove validation for the institution field. NodeJS, ReactJS, Angular 6+, React Native, jQuery, Babel, Webpack, etc. This page will walk through Angular addControl and removeControl methods of FormGroup example. The FormGroup can add, update or remove a form control at runtime. The form control can be FormGroup, FormControl and FormArray. Find the methods of FormGroup used to add, update or remove controls.

Comments
  • So basically the user has to fill out everything when using the submit button, but the save as draft will work because there is no validation on the controls - might work, will try it out
  • Can you show me an example? I have tried this, but because there is no validation the submit button is always active after typing in the first input field..
  • Nice and clean answer
  • It will create not a good responsive design. user needs to know before hits submit that is a good pattern