Question

我想在选中复选框时禁用我的文本框。问题是，即使没有任何条件，我也无法一开始将其禁用。

这是我的HTML：

<label for="checkbox-inline">
    <input type="checkbox" class="checkbox other" name="others" value="15"
        #goodsOthersChk (change)="onCheckArray($event, Form.value.goods)">
    <p class="otherText"> Others:</p>
    <input id="goodsOthers" name="goodsOthers"
        formControlName="goodsOthers" type="text" value=""
        class="form-control otherInput" size="30%" [disabled]="isDisabled">
</label>

我的component.ts：

export class GoodsComponent implements OnInit {
  isDisabled = true;
}

我看不到我想念的东西。当我检查文本框时，它具有ng-reflect-is-disabled的属性，该属性设置为true，但不会反映在我的页面上。

Answer 1

我认为这是因为您使用的是反应式表格。从理论上讲，您可以使用disabled属性，但是Reactive Form的处理方式是在初始化FormGroup时设置disabled属性。

yourFrom: FormGroup = this.formBuilder.group({
  goodsOthers: [{ value: null, disabled: true }],
  .
  .
  // other Form controls
})

Other FormControl properties

Answer 2

您可以将复选框输入值绑定到isDisabled属性。

<label for="checkbox-inline">
    <input 
        type="checkbox" 
        class="checkbox other" 
        name="others" 
        [(ngModel)]="isDisabled" 
        #goodsOthersChk>
    <p class="otherText"> Others:</p>
    <input 
        id="goodsOthers" 
        name="goodsOthers" 
        type="text" 
        value=""
        class="form-control otherInput" 
        size="30%" 
        [disabled]="isDisabled">
</label>

Angular 6-无法禁用输入文本框

2 个答案: