I have this model:
export class PlantArea {
constructor(
public id?: number,
public code?: string,
public name?: string,
public plantId?: number,
public plant?: Plant,
public company?: Company
) {}
}
And I have set up this form:
form: FormGroup = new FormGroup({
id: new FormControl(this.formData.id),
code: new FormControl(this.formData.code, [Validators.required]),
name: new FormControl(this.formData.name, [Validators.required]),
company: new FormControl(this.formData.company, [Validators.required]),
plant: new FormControl(this.formData.plant, [Validators.required]),
});
I have a grid, where I have an edit button. Clicking on it shows the edit form, sets an input property, which binds the chosen entity to the form via this.form.reset(entity)
:
@Input() set model(entity: T) {
console.log(entity);
this.form.reset(entity);
console.log(this.form.value);
this.active = entity !== undefined;
this.editMode = entity?.id ? true : false;
}
The issue is, that by reseting the form values, the plant
property gets dropped and the appr. control value isn't set. If I log the entity, the plant
property is there, but if I log the form value, the plant
property is gone:
Why is this? I can't figure out. There is a plant
control on the form, so, it should bind the value to this, right?