I have a large form to create and decided to use the reactive form feature for ease of use. However, I am facing a few challenges that might be obvious and looking for help.
Below are two cases that yield the same outcome with the exception of the validation. The createFormWithValidation()
method specifics every control and it's associated validators. The createFromPassingObject()
method creates the same form using just the this.party
object but without the added validators.
My goal is to pass an object to this.fb.group()
that will have the controls that are part of the class and be able to specify validators for each property of the Party
Class.
// The Class with the properties
export class Party {
firstName: string = '';
lastName: string = '';
constructor() {}
}
// party Object
myForm: FormGroup;
this.party = new Party();
// Form with explicit controls and their validators
createFormWithValidation() {
this.myForm = this.fb.group({
firstName: [this.party.firstName, [Validators.required, Validators.minLength(3)]],
lastName: [this.party.lastName, [Validators.required, Validators.minLength(3)]]
})
}
// The goal is to achieve this type of method where this.party will be the object of the controls and their validators.
createFormPassingObject() {
this.myForm = this.fb.group(this.party)
}
Your help is greatly appreciated.