I am encountering an error while creating a simple form with Angular using a reactive form. I'm puzzled as to why it's indicating that something is missing:
Although I have created forms numerous times before, this is the first instance of such an error.
https://i.stack.imgur.com/Vnyj0.jpg
ts.file
productForm: any = FormGroup;
constructor(private fb: FormBuilder,
public dialogRef: MatDialogRef<DialogFormComponent>,
@Inject(MAT_DIALOG_DATA) public data:any) { }
ngOnInit() {
this.initDialogForm();
}
initDialogForm() {
this.productForm = this.fb.group({
id: [this.data?.id],
name: [this.data?.name , Validators.required],
price: [this.data?.price , Validators.required],
comment: [this.data?.comment , Validators.required],
date : [this.data?.date]
});
}
onSubmit() {
this.dialogRef.close(this.productForm.value);
}
}
html
mat-dialog-content>
<form [formGroup]="productForm" (ngSubmit)="onSubmit()">
<div class="from-group">
<label for="name">Nom</label>
<input id="name" type="text" formControlName="name" class="form-control">
</div>
<div class="from-group">
<label for="price">Prix</label>
<input id="price" type="number" formControlName="price" class="form-control">
</div>
<div class="from-group">
<label for="comment">Commentaire</label>
<input id="comment" type="text" formControlName="comment" class="form-control">
</div>
<div class="from-group">
<label for="expiration">date de péremption</label>
<input id="expiration" type="date" formControlName="date" class="form-control">
</div>
<mat-dialog-actions>
<button>Valider</button>
</mat-dialog-actions>
</form>
</mat-dialog-content>