Angular Form：尚无表单控件在此数组中注册

Question

我有一个小问题，也许有人可以帮忙，因为我已经做了一个多小时了...

在我的组件文件中，我使用一种方法创建表单，然后使用另一种方法进行API调用，返回一些数据并设置所创建数组的控件之一。这是我的一些简化代码，仅是ngOnInit，constructor和相关方法

constructor(public dialogRef: MatDialogRef<EditAccountComponent>,
          @Inject(MAT_DIALOG_DATA) private data,
          private apiService: ApiService,
          private emailUniqueValidator: EmailUniqueValidator) {
            this.user = data;
}

ngOnInit(): void {
    this.editAccountForm = this.createEditUserForm();
    this.getRoles();
}

createEditUserForm(): FormGroup {
    return new FormGroup({
        name: new FormControl(this.user.name, [Validators.required, Validators.max(50)]),
        email: new FormControl(
        this.user.emailAddress,
        [Validators.required, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')],
        this.emailUniqueValidator.validate.bind(this)
        ),
        companies: new FormControl(this.user.tags.company),
        roles: new FormArray([])
    });
}

getRoles(): any {
        this.apiService.getUserRoles(this.data.id).subscribe(roles => {
        // roles = ['role 1', 'role 2', 'role 3'];
        this.editAccountForm.controls['roles'].setValue(roles);
    });
}

在createEditUserForm方法中，我使用new FormArray([])创建Roles属性，因为该值可以是最多包含4个值的字符串数组，例如：['role 1', 'role 2','role 3','role 4']。在我的getRoles方法中，我返回一个字符串数组，并尝试将其设置为表单的roles属性。但是，这给了我一个错误。

“尚未在此数组中注册任何表单控件。如果您使用的是ngModel，则可能要检查下一个刻度（例如，使用setTimeout）。”

所以我试图将.setValue(roles)更改为.patchValue(roles) ...，但是这没有用，我还尝试用this.apiService.getUserRoles调用中的每个值创建一个FormControls数组，但这不起作用。 。有人可以告诉我如何使用API​​返回的字符串数组设置角色表单属性的值吗？

Answer 1

您的FormArray未正确初始化，并且不包含任何其中应设置以下角色的FormControl。您将需要使用Angular documentation中编写的初始值填充它。如果要根据角色的数量动态设置它们，请参见链接https://stackblitz.com/edit/angular-6dzav1

下的代码