enable or disable field. Reactive Form Angular-CodePudding

I tried to enable and disabled the repassword field in a reactive form with [angular version:13] when the password field is valid.

I solved it with a technique I dont like it.

[HTML]

 <input formControlName="password" (change)="enableOrDisablePassword()" type="text"    >

COMPONENT

enableOrDisablePassword(){                                                                                                    
    setTimeout(()=>{                                                                                                        
    (this.form.get('password')?.valid) ?                                                                              
    this.form.get('repassword')?.enable():                                                                        
    this.form.get('repassword')?.disable();                                                                       
    },2000);                                                                                                                
    }

The setTimeout() is because when you try to check if is valid....the FormControl return the previus status and not the new...so I wait a bit for it to update.

There are articles that advice use the validator function in the FormGroup level because you are interacting with two fields that are in the same block. In any case I tried many things and the problem is always de same....The return value is always the previus status and not the new. I have to wait a bit.

Thanks.

CodePudding user response：

Why not simply do

<input formControlName="repassword" [disabled]="isPasswordInvalid()" type="text">

get isPasswordInvalid(): boolean {
  return this.form.get('password')?.valid;
}

CodePudding user response：

I'd use something along these lines:

export class AppComponent {
  // just a simple form definition with some basic validation I used
  // to test this solution with
  form = new FormGroup({
    password: new FormControl(undefined, Validators.pattern('^[a-zA-Z0-9]{4}$')),
    repassword: new FormControl(),
  });

  ngOnInit() {
    const passCtrl = this.form.controls['password'];
    const repassCtrl = this.form.controls['repassword'];
    passCtrl.valueChanges.subscribe(x => {
      passCtrl.valid ? repassCtrl.enable() : repassCtrl.disable();
    });
  }
}

@E. Maggini's answer works (if you correct the getter/method calling bit), but because the [disabled] expression gets evaluated with every change detection cycle, that may impact the performance if that technique gets applied too often on the page. Also, not 100% sure of this, but I believe Angular doesn't like it when you bind [disabled] like that while simultaneously using Reactive Forms.

// Update Yup, Angular doesn't like that method. On the console:

It looks like you're using the disabled attribute with a reactive form directive.
If you set disabled to true when you set up this control in your component class,
the disabled attribute will actually be set in the DOM for you. We recommend
using this approach to avoid 'changed after checked' errors.