Question

我正在尝试在我的被动形式中禁用选择表单控件。目前有任何问题吗？我一直在寻找答案，但我无法得到答案。我使用的代码如果是常规输入控件则可以正常工作，但不适用于选择控件。

<select id="locationScanType" class="form-control" formControlName="locationScanType">                     
  <option value="0">-- Select One --</option>
  <option value="FACILITY">Facility</option>
  <option value="CUSTOMER_LOCATION">Customer Location</option>
  <option value="MY_LOCATION">My Location</option>
</select>

<input type="text" class="form-control" formControlName="textInput" />

在我的ngOnInit()函数中，我执行此操作：

this.stopForm = this._formBuilder.group({
  locationScanType: { value: this.stop.locationScanType, disabled: true }, // Hard code true for demo
  textInput: { value: 'Text Input', disabled: true }
});

disabled属性适用于文本输入，但不适用于选择输入。它确实为选择输入选择了正确的值，但不会禁用它。我错过了一些明显的东西吗？

我可以使用select输入上的[attr.disabled]和/或[ngClass]属性来禁用选择输入，但我宁愿在表单构建器中执行此操作;更不用说如果我不这样做，Angular会向我的浏览器控制台发出警告。

typescript: 2.4.2

@angular/core: 5.1.3

@angular/forms: 5.2.0

Answer 1

您可以使用提供FormControl类的disable函数。创建表单后，可以在特定表单控件中调用此函数

this.stopForm = this._formBuilder.group({
  locationScanType: { value: this.stop.locationScanType }, // Hard code true for demo
  textInput: { value: 'Text Input', disabled: true }
});

this.stopForm.get("locationScanType").disable()

禁用Reactive Forms / Angular 4+中的Select Form Control

1 个答案: