Angular 6 - unable to disable input textbox

Question

I would like to disable my textbox when a checkbox is checked. Problem is, I can't even disable it in the first place without any condition.

This is my 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>

my component.ts:

export class GoodsComponent implements OnInit {
  isDisabled = true;
}

I don't see what I'm missing. When I inspect the textbox, it has a property of ng-reflect-is-disabled which is set to true but does not reflect on my page.

Answer 1

I think that is because you are using Reactive Forms. Theoretically speaking, you can use the disabled attribute, but the Reactive Form way of doing things would be to set the disabled property when you initialise the FormGroup.

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

Other FormControl properties