Question 219902 in Html Question posted in
Some basic documentation can be found here.

Html – How can I disabled this input by choosing 'immediately_apply' radio button in angular?

I want to disabled this two inputs with choosing immediately_apply radio button
here my html code:

<label>repeat mode:</label>
<mat-radio-group class="repeat_group" formGroupName="is_cron">
    <mat-radio-button class="repeat_button" id="1" value="daily_repaet">daily</mat-radio-button>
    <mat-radio-button class="repeat_button" id="2" value="immediately_apply">immediately</mat-radio-button>
</mat-radio-group>

<div class="field">
    <label>start:</label>
    <mat-form-field appearance="fill" class="time_field">
        <mat-label>minute</mat-label>
        <input #cronselector_disabled type="number" matInput formControlName="minute_start" class="dir-ltr" min="0" max="60">
    </mat-form-field>
    <mat-form-field appearance="fill" class="time_field">
        <mat-label>hour</mat-label>
        <input #cronselector_disabled type="number" matInput formControlName="hour_start" class="dir-ltr" min="0" max="24">
    </mat-form-field>
</div>
Tags:

2

Answers


  1. 0

    Give change event in your immediately radio button.

    <mat-radio-button class="repeat_button" id="2" (change)="radioChange($event)" value="immediately_apply">immediately</mat-radio-button>

    Use Disabled property in two inputs.

    <input #cronselector_disabled [disabled]='inputDisabled' type="number" matInput formControlName="hour_start" class="dir-ltr" min="0" max="24">
<input [disabled]='inputDisabled' #cronselector_disabled type="number" matInput formControlName="hour_start" class="dir-ltr" min="0" max="24">

    And in your TS file just set inputDisabled to true wheck checked and define inputDisabled in your TS.

    radioChange(event) {
    if(event.value == checked){
      this.inputDisabled = true;
    }
}

    I hope this will help you!!

    Login or Signup to reply.
  2. 0
    1. Add change function in mat radio and give on/off logic in TS
    2. Use readonly in input field about read only

    HTML

    
      <mat-radio-group class="repeat_group" formGroupName="is_cron" (change)="onChange($event)">
        <mat-radio-button class="repeat_button" id="1" value="daily_repaet">daily</mat-radio-button>
        <mat-radio-button class="repeat_button" id="2" value="immediately_apply">immediately</mat-radio-button>
    </mat-radio-group>
    <div class="field">
        <label>start:</label>
        <mat-form-field appearance="fill" class="time_field">
            <mat-label>minute</mat-label>
            <input #cronselector_disabled type="number" matInput formControlName="minute_start" class="dir-ltr" min="0"
                max="60" [readonly]="disable">
        </mat-form-field>
        <mat-form-field appearance="fill" class="time_field">
            <mat-label>hour</mat-label>
            <input #cronselector_disabled type="number" matInput formControlName="hour_start" class="dir-ltr" min="0"
                max="24" [readonly]="disable">
        </mat-form-field>

    TS

      disable: boolean = false;
  onChange(event: any) {
    if(event.value == 'immediately_apply')
      this.disable = true;
    else
      this.disable = false;
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search