如何为 Angular 反应形式动态设置禁用?

How can you dynamically set disabled for Angular reactive form?

我有一个 Angular 4.10 应用程序正在使用 Kendo Angular 网格控件。我正在使用外部编辑。我创建了 FormGroup 如下:

        this.editForm = new FormGroup({
        'Id': new FormControl({ value: 0, disabled: true }),
        'Name': new FormControl("", Validators.compose([Validators.required, Validators.maxLength(30)])),
        'BlindName': new FormControl({ value: "" }, Validators.compose([Validators.required, Validators.maxLength(30)])),
        'UnitText': new FormControl(0),
        'IsFromBsp': new FormControl(true),
        'Disabled': new FormControl(false),
        'SortOrder': new FormControl(0, Validators.compose([Validators.required, Validators.pattern('\d')]))
    });

我想做的是根据值 IsFromBsp 为字段 BlindName 设置禁用状态。类似于:

'BlindName': new FormControl({ value: "", disabled: this.IsFromBsp }, Validators.compose([Validators.required, Validators.maxLength(30)])),

有办法实现吗?请告诉我。 谢谢

我不知道 kendo 是如何工作的,但在 html 中你可以这样做:

 <input type="text" [disabled]="form.controls['IsFromBsp']==='' && form.controls['IsFromBsp'].touched" formControlName="something"> 

如果 IsFromBsptrue,我假设您想禁用输入字段。如果这只是最初需要的,您可以在构建表单后 运行 一个函数:

check() {
  if(this.editForm.get('IsFromBsp').value == true) {
    this.editForm.get('BlindName').disable()
  }
}

如果这个值发生变化,你必须在某些变化事件上再次调用这个函数,使用 (change) 或者然后使用 valueChanges 来观察表单值的变化,如果值是 true 之外的东西,您可以执行 this.editForm.get('BlindName').enable() 以再次启用它。这适用于 "regular" 反应形式,希望也适用于 Kendo.