时间戳

首页 > 解决方案 > 如果相关表单组无效，Angular 7 和表单数组会禁用表单组的按钮，并给出未定义的错误

angular - 如果相关表单组无效，Angular 7 和表单数组会禁用表单组的按钮，并给出未定义的错误

问题描述

我有一个表单数组，为每行生成一个带有按钮的表单控件。

如果表单数组中的相关表单组无效，我需要禁用相关按钮。

按钮是：

<button mat-raised-button color="warn" type="submit" color="warn" (click)="addDist(element, i)">
                <mat-icon>add</mat-icon> Add
</button>

使用数组形式：

this.arrayGroup = new FormGroup({
  distribution: new FormArray(this.dataSource.data.map(x => new FormGroup({
    actual_date: new FormControl('', Validators.required),
    note: new FormControl(''),
    kit: new FormControl('', Validators.required)
  })
  ))
});

因此，在每一行中，我都需要禁用它，直到dateandkit被填充。如果未填写表单，其他按钮应保持无效。

我试过：

<button mat-raised-button color="warn" [disabled]="!arrayGroup.get('distribution')).at(i).valid" type="submit" color="warn" (click)="addDist(element, i)">
                <mat-icon>add</mat-icon> Add
</button>

但出现以下错误：

未捕获（承诺中）：错误：模板解析错误：解析器错误：[!arrayGroup.get('distribution')).at(i).valid] 中第 32 列的意外令牌')'

然后我尝试了：

[disabled]="!arrayGroup.distribution.at(i).valid"

我得到了：

错误类型错误：无法读取 Object.eval [as updateDirectives] 处未定义的属性“at”

标签： angularangular7angular-reactive-formsformarray

解决方案

这是一个语法错误。您的代码中有一个括号太多。

这是更新的代码：

[disabled]="!arrayGroup.get('distribution').at(i).valid"

推荐阅读