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

Question

我有一个 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)])),

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

Answer 1

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

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

Answer 2

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

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

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

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

How can you dynamically set disabled for Angular reactive form?

angular

kendo-ui-angular2

angular-reactive-forms