Angular - 反应式表单 - 如何使用类和验证器将对象传递给 FormGroup

Question

我要创建一个大型表单，并决定使用响应式表单功能以方便使用。但是，我面临一些可能很明显的挑战并寻求帮助。

以下是两种产生相同结果的情况，但验证除外。 createFormWithValidation() 方法详细说明了每个控件及其关联的验证器。 createFromPassingObject() 方法仅使用 this.party 对象创建相同的表单，但没有添加验证器。

我的目标是将一个对象传递给this.fb.group()，该对象将具有属于该类的控件，并且能够为Party 类的每个属性指定验证器。

// 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)
}

非常感谢您的帮助。

Answer 1

这就是我正在为我的案子做的事情。请注意，我也正在处理我的项目，因此无法保证它会正常工作并且会正常工作。无论如何，这就是我的做法：

// First is to define a const that is going to be the pre-defined object going in this.formBuilder.group()
export const predefinedFormGroup = {
 property1: new FormControl('', Validators go here),
 property2: new FormControl('', Validators go here)
}

// Create the form
this.myForm = this.formBuilder.group(predefinedFormGroup);

// My use-case is I have to add new FormGroup to an existed FormGroup in an existed Form:
(<FormGroup>this.myForm.get['sections']).addControl(section.name, this.formBuilder.group(section.interface));

我希望我在这里说得通。