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

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

CodePudding user response：

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