I'm using angular 6 and I have a form and a button. When I press the button the app shows the form data above the form and I call form.reset()
. But after form reset the input fields become red because I set the fields required in my form. Where is the problem?
app.html
<form [formGroup]='fuelForm'>
<mat-form-field class="input input2">
<input matInput placeholder="Nozzle name" formControlName="nozzleName">
</mat-form-field>
<mat-form-field class="input input2">
<input matInput type="number" min="1" id="nozzleNumber" formControlName="nozzleNumber" placeholder="Nozzle number" >
</mat-form-field>
<mat-form-field class="input input4">
<mat-select placeholder="Fuel type" formControlName="fuelType">
<mat-option *ngFor="let item of fuelList" [value]="item">{{item}}</mat-option>
</mat-select>
</mat-form-field>
<button mat-icon-button class="circle_button" (click)="add()">
<mat-icon class="plus_icon">add_circle_outline</mat-icon>
</button>
</form>
app.ts
export class DialogNozzleComponent {
fuelForm :FormGroup;
fuelList = ['Petrol', 'Super petrol', 'Euro4 petrol', 'Gasoline', 'Euro4 gasoline'];
nozzleItem = [
{
nozzleName: 'Nozzle',
nozzleNumber: '1',
fuelType: 'Super petrol'
},
{
nozzleName: 'Nozzle',
nozzleNumber: '2',
fuelType: 'Gasoline'
}
];
constructor(public fb : FormBuilder) {
this.fuelForm = fb.group({
nozzleName: {value:'Nozzle', disabled: true},
nozzleNumber: [null, Validators.required],
fuelType: [null, Validators.required]
});
}
add() {
const formValue = this.fuelForm.value;
formValue.nozzleName = this.fuelForm.controls['nozzleName'].value;
this.nozzleItem.push(formValue);
this.fuelForm.controls['nozzleNumber'].reset();
this.fuelForm.controls['fuelType'].reset();
}
}
Have you tried
this.fuelForm.reset();
this.fuelForm.markAsPristine();