Angular - disable another control based on no value entered in a textbox

Question

I am using Angular and the FormBuilder to generate the FormGroup. I want to be able to disable the status control if there is no value entered in the legacyId text box.

I was hoping the below would work, but the formGroup I am referencing on the status line is not yet created, its calling its own formGroup. How would I be able to do this so that the status gets disabled if the textbox is empty?

this.formGroup = this.formBuilder.group({
    legacyId: [{value: this.myItems.legacyId : ''), [Validators.maxLength(this.legacyIdMaxLength)]],
    status: [{value: this.statuses.find(x => x.id === status), disabled: this.formGroup.value.legacyId === ''}, [Validators.required]],
});

Emilien · Accepted Answer · 2021-10-20 13:43:11Z

2

Maybe you can try with valueChanges like :

this.formGroup.get('legacyId').valueChanges.subscribe(value => {
  if (!!value) {
    this.formGroup.get('status').disable();
  } else {
    this.formGroup.get('status').enable();
  }
  this.formGroup.updateValueAndValidity()
});

edited Oct 20, 2021 at 13:43

answered Oct 20, 2021 at 13:34

Emilien

2,7534 gold badges17 silver badges30 bronze badges

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

2 Comments

Andrew Over a year ago

Thanks, yes that seems to work, had to wrap the enable in an else, but that seems to work

Emilien Over a year ago

I've updated my code so people in the futur could find the solution quickly ;)

Collectives™ on Stack Overflow

Angular - disable another control based on no value entered in a textbox

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related