重置反应形式Angular Material

Question

我正在尝试在发送数据后重置我的表单。除了邮件格式验证的细节之外，我几乎已经完成了。我应该提一下this.form.reset() 对我不起作用。

知道怎么解决吗？

<form [formGroup]="forma" (ngSubmit)="agregarDomiciliario()" novalidate>
      <mat-form-field>
        <input matInput placeholder="Valor de la propiedad" formControlName="valorPropiedad">
        <mat-error *ngIf="forma.controls['valorPropiedad'].invalid">{{ errorValorPropiedad() }}</mat-error>
      </mat-form-field>
      <div class="row">
        <mat-form-field class="col-md-6">
          <input matInput placeholder="Ingresa tu email" formControlName="email">
          <mat-error *ngIf="forma.controls['email'].invalid">{{ errorEmail() }}</mat-error>
        </mat-form-field>
        <mat-form-field class="col-md-6">
          <input matInput placeholder="Ingresa tu celular" formControlName="celular">
          <mat-error *ngIf="forma.controls['celular'].invalid">{{ errorCelular() }}</mat-error>
        </mat-form-field>
      </div>
      <div class="row mt-4">
        <div class="col-md-6">
          <mat-checkbox class="small" formControlName="acepta">Acepto los términos y condiciones</mat-checkbox>
        </div>
        <div class="col-md-6 text-right">
          <button mat-raised-button color="primary" type="submit" [disabled]="!forma.valid">Cotizar <i class="fas fa-arrow-right ml-2"></i></button>
        </div>
      </div>
    </form>

forma: FormGroup;

  constructor(fb: FormBuilder) { 
    this.forma = fb.group ({
      valorPropiedad: [ '', Validators.required ],
      email : ['', [Validators.required, Validators.email] ],
      celular: [ '', Validators.required ],
      acepta : [ false, Validators.requiredTrue ]
    });
  }
  
  agregarDomiciliario() {
    console.log(this.forma.value);
    this.forma.setValue({
      valorPropiedad : [''],
      email: [''],
      celular: [''],
      acepta : false,
    });
  }

Answer 1

您在(ngSubmit) 事件上调用的方法调度了一个无效的setValue 调用。如果您希望表单与构造函数中定义的值匹配，则应如下所示：

agregarDomiciliario() {
  this.forma.setValue({
    valorPropiedad : '',
    email: '',
    celular: '',
    acepta : false,
  });
}

否则，您将valorPropiedad、email 和celular 值设置为['']（具有单个空字符串的数组）而不是''（空字符串）。