CODEWITHSUNDEEP
javascriptvalidationangular5angular6angular-reactive-forms
Kumaresan Perumal
Kumaresan Perumal

Reputation: 1956

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

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

Upvotes: 2

Views: 5032

Answers (2)

Tom Balcaen
Tom Balcaen

Reputation: 101

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

Upvotes: 1

Roberto Zvjerković
Roberto Zvjerković

Reputation: 10157

Remove the control from the formGroup with removeControl formGroup method.

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

Upvotes: 2

Related Questions