CODEWITHSUNDEEP
angularcomponents
Bruno Miguel
Bruno Miguel

Reputation: 1115

How to set angular custom component disabled

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);
    }
}

Upvotes: 1

Views: 1935

Answers (1)

Edward Ramos
Edward Ramos

Reputation: 115

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]
    });

Upvotes: 1

Related Questions