How to set angular custom component disabled

Question

Im building some angular custom component and now im implementing the interfaces ControlValueAccessor in order to provide Template/Reactive driven form integration.

My problem is on how do i set my all component to disabled, just like we can do on native inputs

I have tried to set disabled like this:

setDisabledState(isDisabled: boolean): void {
    if(isDisabled) {   
        this.renderer.setProperty(this.elementRef.nativeElement, "disabled", true);
}
    else {
        this.renderer.setProperty(this.elementRef.nativeElement, "disabled", false);
    }
}

Edward Ramos · Accepted Answer · 2019-07-05 16:18:24Z

1

Try this: [attr.disabled]="true"

<select name="modulo" id="modulo" class="form-control modulo" formControlName="id_modulo" [attr.disabled]="true">
        <option value="{{ m.id_modulo }}" *ngFor="let m of modulos" >{{m.nome_modulo }}</option>
      </select>

FormBuilder in Component:

this.formulariosForm = this.formBuilder.group({
      id_formulario: [null],
      nome_formulario: [null, Validators.required],
      descricao: [null, Validators.required],
      id_modulo: [null, Validators.required],
      analista_responsavel: [null, Validators.required],
      url: [null, Validators.required]
    });

answered Jul 5, 2019 at 16:18

Edward Ramos

1151 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to set angular custom component disabled

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related