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([])作为值可以是一个字符串数组，具有最大4个值，例如：['role 1', 'role 2','role 3','role 4']。在我的getRoles方法中，我返回一个字符串数组并尝试将其设置为表单的角色属性。但是，这给了我一个错误；

“还没有使用此数组注册的表单控件。如果您使用的是 ngModel，您可能需要检查下一个刻度（例如使用 setTimeout）。”

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

Answer 1

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