重置 Angular Formly 表单验证点击事件

Question

我正在使用 angular formly 模块实现动态表单，它工作正常。我需要的功能是最初应该有一个包含多个选项的 select 框，基于 selection 应该显示不同的表单字段。正如我所解释的那样，我已经实施并且它正在运行，这里我的问题是如果我 select 选项 1 并且如果我提交没有填写字段的表单，显示验证错误的表单也很酷。但是当我 select 选项 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  [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;
}

这只会重置表单值，要重置表单错误，我们还需要重置表单指令。

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

重置 Angular Formly 表单验证点击事件

Reset Angular Formly Form Validations on click event

angular-formly

angular6

html

ts 文件