Angular 7 如果相关表单组无效,则表单数组禁用表单组的按钮给出未定义的错误
Angular 7 and Form Arrays disable a button of a form group if the related form group is not valid is giving an error of undefined
我有一个表单数组,用一个按钮为每一行生成表单控件。
如果表单数组中的相关表单组无效,我需要禁用相关按钮。
按钮是:
<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)
})
))
});
所以在每一行中我都需要禁用它,直到 date
和 kit
被填满。如果未填写表格,其他按钮将保持无效。
我试过了:
<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>
但出现错误:
Uncaught (in promise): Error: Template parse errors: Parser Error:
Unexpected token ')' at column 32 in
[!arrayGroup.get('distribution')).at(i).valid]
然后我尝试了:
[disabled]="!arrayGroup.distribution.at(i).valid"
我得到了:
ERROR TypeError: Cannot read property 'at' of undefined
at Object.eval [as updateDirectives]
这是语法错误。您的代码中有一个括号太多了。
这是更新后的代码:
[disabled]="!arrayGroup.get('distribution').at(i).valid"
我有一个表单数组,用一个按钮为每一行生成表单控件。
如果表单数组中的相关表单组无效,我需要禁用相关按钮。
按钮是:
<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)
})
))
});
所以在每一行中我都需要禁用它,直到 date
和 kit
被填满。如果未填写表格,其他按钮将保持无效。
我试过了:
<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>
但出现错误:
Uncaught (in promise): Error: Template parse errors: Parser Error: Unexpected token ')' at column 32 in [!arrayGroup.get('distribution')).at(i).valid]
然后我尝试了:
[disabled]="!arrayGroup.distribution.at(i).valid"
我得到了:
ERROR TypeError: Cannot read property 'at' of undefined at Object.eval [as updateDirectives]
这是语法错误。您的代码中有一个括号太多了。
这是更新后的代码:
[disabled]="!arrayGroup.get('distribution').at(i).valid"