component.ts:
-------------
this.createForm = this.fb.group({
equipments: [this.data.equipments || "", [Validators.required]],
storage: [this.data.storage || "", [Validators.required]],
users: this.fb.group({
admins: [this.data.users.admins || ""],
supervisors: [this.data.users.supervisors || ""],
staffs: [this.data.users.staffs || ""],
}),
});
get createFormControl(): { [key: string]: AbstractControl } {
return this.createForm.controls;
}
<mat-form-field class="flex-auto" appearance="outline">
<mat-label>Admins
<input
name="admins"
="" formcontrolname="admins" type="number" min="0" required
="" matinput
="">
<mat-form-field class="flex-auto" appearance="outline">
<mat-label>supervisors
<input
formcontrolname="supervisors"
="" type="number" min="0" required
="" matinput
="">
<mat-form-field class="flex-auto" appearance="outline">
<mat-label>Maintenance Staffs
<input
formcontrolname="staffs"
="" type="number" min="0" required
="" matinput
="">
What I have tried:
for objects in formcontrol used formGroupName in html, but the real issue is in the ts
users: this.fb.group({
admins: [this.data.users.admins || ""],
supervisors: [this.data.users.supervisors || ""],
staffs: [this.data.users.staffs || ""],
}),