Conditionally disable a material checkbox in Angular 10-CodePudding

I need to do something like this a few times in an Angular app I'm working on but this should be a simple example. So I have this radio group:

    <div >
      <div >
        <h5>Audbase</h5>
      </div>
      <mat-radio-group  (change)="onRadioChange(4, $event.value)">
        <mat-radio-button  [value]="location4.value"><input #location4 ngModel="location4" type="text"  id="location4" name="location4" (click)="$event.stopPropagation()" placeholder="Enter location..."/></mat-radio-button>
      </mat-radio-group>
    </div>

I want the checkbox for the radio button to be disabled UNTIL the user enters a value for the location4 input field. In other words, the radio button should be disabled while location4 is null.

I don't think it is relevant to the question but this is onRadioChange

  onRadioChange(appID: number, applciation: string): void {
    // Add all applicationAccess objects to model
    console.log('appID: ', appID, 'application: ', applciation);
    // Don't add the value if it's blank
    if (applciation !== null && applciation !== '' && applciation !== undefined) {
      this.model.applicationAccesses.push(new ApplicationsAccessModel().setModel(appID, applciation));
    }
    console.log(this.model);
  }

CodePudding user response：

Just use the disabled attribute of MatRadioButton.

<mat-radio-button  [value]="location4.value" [disabled]="!location4.value">