how to disable or enable input text through a reactive radio input

Asked

Viewed 47 times

1

I’m calling this way in html 

<div class="ui-g-12 ui-md-4 center-zone">
    <input-radio id="controle" theme="boolean" label="tem controle?" (click)="valueSelect($event)"></input-radio>
  </div>

  <div class="ui-g-12 ui-md-4">
    <msp-input-text id="tipo" [disabled]="true" label=" Qual o tipo de controle? "tooltip="ajustar"></msp-input-text>
  </div>

The themes of the Boolean radio field are: YES, NO, INDIFFERENT

I added in formGroup this way

  controle: [null],

  tipo: [{ value: null, disabled: true }, [Validators.required, Validators.maxLength(30)]],

and mounted this function when selecting the radio value 

    valueSelect(event: any) {
    console.log(event)
    if (event.value) {
      this.form.controls['chassi'].enable();
    } else {
      this.form.controls['chassi'].disable();
    }
  }

When running, it opens disabled (ok, correct), by clicking on yes he needs to enable and case not it disables, but I can’t do it, can you help me please?

angular form reactive-programming

1 answer

2


You can do it like this:

<div class="ui-g-12 ui-md-4 center-zone">
    <input-radio formControl="controle" id="controle" theme="boolean" label="tem controle?" ></input-radio>
  </div>

  <div class="ui-g-12 ui-md-4">
    <msp-input-text  formControl="tipo" id="tipo" [disabled]="!form.value.controle" label=" Qual o tipo de controle? "tooltip="ajustar"></msp-input-text>
  </div>

Browser other questions tagged angular form reactive-programming

You are not signed in. Login or sign up in order to post.