Angular reactive form [disabled] attribute doesn't work for text field based on validity of another text field

1
votes

below is the code snippet for angular reactive form field. The button stays disable until I valid input in mobile field but the same doesn't work for text field. I want second input text field to be disabled until I enter a valid input to mobile field. 

 <div id="mobile_verification">
        <input class="form-control" id="mobile" formControlName="mobile" placeholder="Mobile no." maxlength="10">
        <input class="form-control" id="otp" [disabled]= "!contactForm.controls['mobile'].valid" formControlName="otp" placeholder="OTP" maxlength="6">
        <button type="submit" [disabled]="!contactForm.controls['otp'].valid" class="btn btn-success">Verify</button>
        <button type="submit" [disabled]="!contactForm.controls['mobile'].valid" class="btn btn-success">Resend</button>
 </div>

Is there any another way for text field or am I missing anything? Any help is appreciated.

Thanks.

2
angularangular-reactive-forms
[disabled] doesn't work with reactive forms on form controls, you need to "manually" disable/enable – AJT82
[readonly] would work if it's an option for you – Vega
@AJT_82 I don't think this question is duplicate as I need to decide the enable/disable based on validity of some other text field and not . If I'm wrong please explain. In 2nd comment you mentioned [disabled] doesn't work with reactive forms on form controls, but it works for button, isn't it form control? Vega It's not read only field :-) – tyro
@user2604307 Your button does not a have an formControlName notation does it? So no, buttons are not a form controls :) – AJT82
And as for being a duplicate. It pretty much is. You need to track the value of the field, and then disable/enable the other field accordingly. – AJT82

2 Answers

3
votes

disabled attribute does not work on form controls in reactive forms. You need to "manually" enable and disable the form field. This could be done in a couple of ways that I can think of. Use valueChanges on mobile field and then disable/enable the otp field based on the validity of mobile field.

I like to listen to some change event, where (keyup) would perhaps be most suitable here. You could call a method or use the content of method in template. I like to keep the template clean tho and handle logic in component. So you could set a event for the mobile field:

<input formControlName="mobile" (keyup)="checkValidity()"/>

and then the corresponding method:

checkValidity() {
   this.myForm.get('mobile').valid ? 
   this.myForm.get('otp').enable() : this.myForm.get('otp').disable();
}

Also if this is an empty form initially, you would want to set the otp field as disabled initially:

this.myForm = this.fb.group({
  mobile: ['', [....]],
  otp: [{value:'' disabled:true}]
});

DEMO: http://plnkr.co/edit/SbN3lJNjvXrE26UyVl6j?p=preview

1
votes

you can just say form.invalid like below

<button type="submit" [disabled]="!contactForm.valid" class="btn btn-success">Verify</button>
<button type="submit" [disabled]="!contactForm.valid" class="btn btn-success">Resend</button>

which will validate entire form to be valid.

for individual form field, they have also valid and invalid field

<button type="submit" [disabled]="!opt.valid" class="btn btn-success">Verify</button>
<button type="submit" [disabled]="!opt.valid" class="btn btn-success">Resend</button>

For the input fields if the directly not working you can put them in a div and hide them

<span *ngIf="opt.invalid && (opt.dirty || opt.touched)" class="text-danger align-middle">
               <input ...></input>
</span>