重置Click事件上的Angular形式验证

Question

我正在使用angularformly模块实现动态表单，并且工作正常。我需要什么功能，首先应该有一个包含多个选项的选择框。根据选择，应该显示不同的表单字段。正如我解释的那样，我已经实现了并且可以正常工作，这是我的问题所在，如果我选择选项1，并且如果我没有填写字段就提交表单，那么显示验证错误的表单也很酷。但是，当我选择选项2时，表单字段正在更改，但是默认情况下，所有必填字段都显示错误。我该如何抗拒？请建议我。

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文件

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

在这里，我提供的屏幕供您更好地理解

Answer 1

实际上form.reset()仅重置表单值。您还需要重置form指令。例如

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

.ts文件是

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

这将仅重置表单值，要重置表单错误，我们还需要重置formdirective。

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