Question

我的角动态电抗形式在重置形式后显示垫错误消息。

  <form *ngIf="formGroup" [formGroup]="formGroup" class="form">
  <div  fxLayout="column" *ngFor="let field of fields;let i=index;" 
         [ngSwitch]="field.type">
   <mat-form-field *ngSwitchCase="'text'">
      <input matInput [placeholder]="field.label" 
  [formControlName]="field.name" [id]="field.name">
      <mat-error>{{field.error}}</mat-error>
    </mat-form-field>

 <mat-form-field *ngSwitchCase="'dropdown'">
  <mat-select placeholder="{{field.label}}" [formControlName]="field.name" 
(selectionChange)="onDropDownChange($event)">
    <mat-option  *ngFor="let item of field.items" [value]="item">
      {{item.fact}}
    </mat-option>
  </mat-select>
  </mat-form-field>
 <button (click)="add(formGroup)">
    ADD
  </button>

dynamicform.component.ts

 export class dynamicFormComponent implements OnInit {
  formGroup: FormGroup;
   fields;
  ngOnInit() {
 this.formGroup = this.createFormControls();
  this.fields = [{
 {
    name:"categoryname",
    error:"Please Select ",
    label:"Category",
    type: "text", 
    validation: Validators.required

 },{  name:"categoryType",
    error:"Please Select ",
    label:"Category Type",
    type: "dropdown", 
    items: ['cat1','cat2'],
    validation: Validators.required
  }]
 }

 createControlForm() {
 let fm = {};
 this.fields.forEach((f) => {
 fm[f.name] = new FormControl('', 
  f.validation);
 });
 }

   submit(model){
   // submit logic
    this.formGroup.reset();
    }
    }

提交表格后，我将重新设置表格。重置但显示错误信息。我尝试过以下几种方法。

    submit(model) {
    // Submit logic
     this.formGroup.reset();
     this.formGroup.markAsUntouched();
     this.formGroup.markAsPristine();
      }

2）添加了@ViewChild（'formDirective'）formDirective：NgForm;

   submit(model) {
   // Submit logic
  this.formDirective.resetForm();
  this.formGroup.markAsUntouched();
  this.formGroup.markAsPristine();
   }

我不知道我在这里想念的是什么。我无法弄清楚。请帮助我

表格重置后，角度6反应形式显示出垫错误

0 个答案: