重置反应形式角材料

Question

I am trying to reset my form after sending the data. I've almost done it except for the detail of the validation of the mail format. I should mention that this.form.reset() does not work for me.

Any idea how to fix it?

 <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

Your method invoked on the (ngSubmit) event dispatches an invalid setValue call. If you want your form to match the values defined in your constructor it should look like this:

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

Otherwise you set the valorPropiedad , email and celular values to [''] (array with a single empty string) and not '' (empty string).