angular6angular-formly

Reset Angular Formly Form Validations on click event

I am implementing dynamic forms using the angular formly module and It's working fine. What functionality I need is Initially there should be a select box which contains multiple options, Based on selection different form fields should be displayed. As I explained I have Implemented and it's working, here what my problem is If I select option 1 and If I submit the form without filling fields, form displaying validation errors that is also cool. But when I select option 2 form fields are changing, but by default, all required fields are showing errors. How can I resist this? Please suggest me.

html

<div class="row">
        <mat-form-field class="col-lg-2">
            <mat-select placeholder="Form For" (selectionChange)="getSelectedFormName($event)">
                <mat-option value="uf001">UF001</mat-option>
                <mat-option value="uf002">UF002</mat-option>
                <mat-option value="uf003">UF003</mat-option>
            </mat-select>
        </mat-form-field>
        <div class="col-lg-4">
            <button type="button" class="btn btn-default btn-one" (click)="getDynamicForm()">GET FORM</button>
        </div>
</div>

<form [formGroup]="form" (ngSubmit)="submit(model)" >
        <formly-form [model]="model" [fields]="fields" [form]="form" *ngIf="isFormTypeSelected" >
        </formly-form>
        <button type="submit" class="btn btn-success">Submit</button>
</form>

ts file

getSelectedFormName(eve) {
    this.isFormSaved = false;
    this.form = new FormGroup({});
    this.fields=[];
    this.model = {};
    this.parentFormName = eve.value;
}
getDynamicForm() {
    this.isFormSaved = false;
    this.savedFields=[];
    this.getDynamicFormBasedOnSelection(this.parentFormName);
    //fields getting from api call
}
    
getDynamicFormBasedOnSelection(formName: string) {
    this.auth.getDynamicFormBasedOnSelction(formName, this.userAgencyCode).subscribe(
        (result) => {
            const str = JSON.stringify(result);
            this.fields = JSON.parse(str);
            this.isFormTypeSelected = true;
            this.addEvents(this.fields);
        });
}

Here I'm providing my screens which are for better understanding

enter image description here

enter image description here

enter image description here

Solution

  • Actually form.reset() just reset the form values. You need to reset the form directive too. for eg.

    <form  [formGroup]='authForm' (submit)='submitForm(formDirective)' #formDirective="ngForm" class="is-mat-form">

<mat-form-field>
  <input matInput placeholder="Email ID" formControlName='login'>
    <mat-error *ngIf="authForm.controls.login.hasError('required')">
          Email is required
    </mat-error>
    <mat-error *ngIf="authForm.controls.login.hasError('email')">
          Please enter a valid email address
    </mat-error>           
</mat-form-field>
<mat-form-field>
  <input matInput type="password" formControlName='password' placeholder="Password">
  <mat-error *ngIf="authForm.controls.password.hasError('required')">
      Password is required
  </mat-error>
  <mat-error *ngIf="authForm.controls.password.hasError('minlength')">
       Password must be minimum 6 digit long. 
  </mat-error>  
</mat-form-field>

    and .ts file is

    submitForm(formDirective: FormGroupDirective){
  if (this.authForm.invalid) {
   console.log('form submitted')
   this.authForm.reset()
  return;
}

    this will reset the form values only, to reset the form error we need to reset the formdirective as well.

    submitForm(formDirective: FormGroupDirective){
  if (this.authForm.invalid) {
   console.log('form submitted')
   this.authForm.reset()
   formDirective.resetForm();
  return;
}