Angular set disabled attribute in form builder

Question

I have a reactive form in my app and I was creating it like this:

this.myForm = new FormGroup({
    name: new FormControl(this.item.name, Validators.required),
    active: new FormControl(this.item.active),
    value: new FormControl({ value: this.item.value, disabled: !this.item.active }, this.item.active ? Validators.required : null)
});

But now, I needed to add some custom validators to my form. So, I've changed my code to form builder like this:

this.myForm = this.fb.group({
    name: [this.item.name],
    active: [this.item.active],
    value: [this.item.value, this.item.active ? Validators.required : null]
}, {validators: customValidator()});

I couldn't find how to set disabled attribute like above to below.

Answer found in this thread stackoverflow.com/questions/51951963/… — Ellie
– Ellie, Commented Apr 7, 2022 at 8:31

Vugar Abdullayev · Accepted Answer · 2021-09-10 15:45:05Z

1

Why you try to disable with disabled value. Use disable method of form instead.

this.myForm = new FormGroup({
    name: new FormControl(this.item.name, Validators.required),
    active: new FormControl(this.item.active),
    value: new FormControl({ value: this.item.value}, 
   this.item.active ? Validators.required : null)
},{validators: customValidator()} );

then

this.myForm.get('value').disable({emitEvent: false});

emitEvent: false here will prevent to trigger value change here.

answered Sep 10, 2021 at 15:45

Vugar Abdullayev

2,1513 gold badges24 silver badges50 bronze badges

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

Collectives™ on Stack Overflow

Angular set disabled attribute in form builder

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related