我有以下问题 . Click to check the stack blitz .
我在构造函数中设置了一个反应形式:
this.formGroup = this.fb.group({
'family_name_en': new FormControl('', Validators.required),
'family_name_ar': new FormControl('', [Validators.required, Validators.pattern('[\u0600-\u06FF ]*')]),
'unit_id': new FormControl({ value: '', disabled: true }, [Validators.required])
});
在 ngOnInti()
钩子中,我得到的数据与 unit_id
有关 .
当我将数据从平台迁移到另一个平台时,不建议使用阿拉伯语中的姓氏,但现在就是这样 . 因此大多数数据将加载而没有阿拉伯名称 .
问题是按钮总是启用,我需要做的是如果用户想要更新这个 unit_id
,他应该添加阿拉伯名称,然后启用按钮 .
如果表单有效,则无需在组件加载时启用按钮 .
这是获取数据并设置表单组控件值的 getData()
方法:
ngOnInit() {
this.getDataById();
}
getDataById():
getDataById() {
this.showSpinner = true;
this.auth.getDataById(this.unit_id).subscribe(
(data) => {
if (data['info'][0]['total'] == 1) {
this.noDataBool = false;
this.showSpinner = false;
this.family_name_en = data['info'][0]['hh_last_name_en'];
this.formGroup.controls['family_name_en'].setValue(this.family_name_en);
this.family_name_ar = data['info'][0]['hh_last_name_ar'];
this.formGroup.controls['family_name_ar'].setValue(this.family_name_ar);
this.unit_id = data['info'][0]['unit_id'];
this.formGroup.controls['unit_id '].setValue(this.unit_id);
}
}
按钮:
<button mat-raised-button color="warn" (click)="updateData()" [disabled]="!formGroup.valid">
<mat-icon>update</mat-icon>Update
</button>
2 回答
不要在
formGroup
上使用controls
直接访问FormControl
,而应该使用get
API . 这将为您提供更多控制并显着清理您的实现(特别是在获得深层嵌套元素的情况下) . 您可以像这样更改组件实现:这是你的参考Updated StackBlitz . 你可以在那里输入
علي
来测试它,这将启用更新按钮 . 键入Ali
将使其保持禁用状态 .我总是在这样的情况下使用以下代码:
通过调用第二种方法
updateValueAndValidity()
,我们告诉Angular有关Angular Docs的更多信息 .
现在,如果
data['info'][0]['hh_last_name_ar']
为空,则应禁用该按钮并且表单无效 .您可以对所需的每个字段使用上述方法 .