I'm facing a challenge with resetting my form after data submission. Everything is working except for validating the email format. Using this.form.reset() doesn't seem to resolve the issue.
https://i.sstatic.net/QRZEa.png
Any suggestions on how to solve this?
<form [formGroup]="forma" (ngSubmit)="agregarDomiciliario()" novalidate>
<mat-form-field>
<input matInput placeholder="Property value" formControlName="propertyValue">
<mat-error *ngIf="forma.controls['propertyValue'].invalid">{{ errorPropertyValue() }}</mat-error>
</mat-form-field>
<div class="row">
<mat-form-field class="col-md-6">
<input matInput placeholder="Enter your 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="Enter your phone number" formControlName="phone">
<mat-error *ngIf="forma.controls['phone'].invalid">{{ errorPhone() }}</mat-error>
</mat-form-field>
</div>
<div class="row mt-4">
<div class="col-md-6">
<mat-checkbox class="small" formControlName="accepts">I accept the terms and conditions</mat-checkbox>
</div>
<div class="col-md-6 text-right">
<button mat-raised-button color="primary" type="submit" [disabled]="!forma.valid">Get Quote <i class="fas fa-arrow-right ml-2"></i></button>
</div>
</div>
</form>forma: FormGroup;
constructor(fb: FormBuilder) {
this.forma = fb.group ({
propertyValue: [ '', Validators.required ],
email : ['', [Validators.required, Validators.email] ],
phone: [ '', Validators.required ],
accepts : [ false, Validators.requiredTrue ]
});
}
agregarDomiciliario() {
console.log(this.forma.value);
this.forma.setValue({
propertyValue : [''],
email: [''],
phone: [''],
accepts : false,
});
}