How to submit a form after hiding a field using reactive form in Angular 6?

2
votes

I am working in Angular 6. I have two fields and check box. I put reactive form for fields first-name, last-name. I have another situation when user clicks check box last-name field will be hidden using *ngIf condition. Then I submit the form. The validators do not allow me to submit the form, because it hid.

And another situation is if the user wishes, the user may enter the value in the field sometime. So in this situation, how do I submit the form?

    <form [FormGroup]="testFormGroup" (ngSubmit)="onSubmit()">
      <label> firstName </label>
      <mat-form-field floatLabel="never">
        <input matInput placeholder="firstName" formControlName="firstName" required>
        <mat-error *ngIf="testFormGroup.get('firstName').hasError('required')">
          firstname is required
        </mat-error>
      </mat-form-field>

      <div class="check">
          <mat-checkbox (click)="onCheck()"> check </mat-checkbox>
      </div>

      <div *ngIf="ischeck===true"> 
         <label> lastName </label>
      <mat-form-field floatLabel="never">
        <input matInput placeholder="lastName" formControlName="lastName" required>
        <mat-error *ngIf="testFormGroup.get('lastName').hasError('required')">
          lastName is required
        </mat-error>
      </mat-form-field> 

      </div>


      <button type="submit" name="submit"> submit </button>
    </form>

    testFormGroup: FormGroup; 

    createFormGroup() {
      this.FormGroup = this._formBuilder.group({
        firstname: ['', Validators.required],
        lastname: ['', Validators.required],})
    }

    onSubmit() {

      if (this.testFormGroup.invalid) {
        console.log('');
        return;
      }
      console.log('form', JSON.stringify(this.testFormGroup.value));

    }

    isCheck;

    onCheck() {
       this.isCheck = (this.isCheck === true )? false : true;
    }
2
javascriptvalidationangular5angular6angular-reactive-forms
Don't hide it from DOM with ngIf, remove the form control from the form group. - Roberto Zvjerković
@ritaj sometimes user may wish to enter the field. that is why I did not remove it - Kumaresan Perumal
Then return the form control to the form group on checkbox click... - Roberto Zvjerković
how ? give me idea please - Kumaresan Perumal
sometimes i want to validate firstname and lastname. sometimes i want to check firstname only if user clicks check box. - Kumaresan Perumal

2 Answers

2
votes

Remove the control from the formGroup with removeControl formGroup method.

onCheck() {
       this.isCheck = !this.isCheck;
       if (this.isCheck) {
           this.form.removeControl('lastName');
       }
}
1
votes

You should subscribe to the valueChanges event of the checkbox. In that subscribe you should set validators to required if it is required. And clear validation of the field if you don't need it. Like this example below:

Also in my example the checkbox is a part of the form if you don't need that you can just check the value changed of the checkbox, see example below.

this.testFormGroup.get('blnCompany').valueChanges.subscribe((bln)=>{      
      if(bln) this.testFormGroup.get('lastname').setValidators([Validators.required]);
      else this.testFormGroup.get('lastname').clearValidators();
      this.lasttestFormGroupname.get('lastname').updateValueAndValidity();
    })

Without checkbox in form:

onCheck(){
  if(this.isCheck)this.lasttestFormGroupname.get('lastname').setValidators([Validators.required]);
  else this.lasttestFormGroupname.get('lastname').clearValidators();
  this.lasttestFormGroupname.get('lastname').updateValueAndValidity();
}