In my Angular 6 app, I have a form with input fields and a button. When the button is clicked, the form data is displayed above the form and form.reset() is called to reset the form. However, after the form reset, the input fields turn red due to them being set as required in the form. What could be causing this issue?
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();
}
}