Angular 反应形式 [disabled] 属性不适用于基于另一个文本字段有效性的文本字段 [英] Angular reactive form [disabled] attribute doesn't work for text field based on validity of another text field

问题描述

以下是角度反应形式字段的代码片段.该按钮保持禁用状态，直到我在移动字段中有效输入，但同样不适用于文本字段.我希望禁用第二个输入文本字段，直到我向移动字段输入有效输入.

 
<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">验证</button><button type="submit" [disabled]="!contactForm.controls['mobile'].valid" class="btn btn-success">重新发送</button>

文本字段还有其他方法吗，还是我遗漏了什么?任何帮助表示赞赏.

谢谢.

解决方案

disabled 属性不适用于响应式表单中的表单控件.您需要手动"启用和禁用表单域.这可以通过我能想到的几种方式来完成.在 mobile 字段上使用 valueChanges，然后根据 mobile 字段的有效性禁用/启用 otp 字段.

我喜欢听一些更改事件，其中 (keyup) 可能最适合这里.您可以调用方法或使用模板中方法的内容.我喜欢保持模板干净，并处理组件中的逻辑.所以你可以为 mobile 字段设置一个事件:

然后是对应的方法:

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

此外，如果最初这是一个空表单，您可能希望将 otp 字段设置为最初禁用:

this.myForm = this.fb.group({移动的: [''， [....]]，otp: [{value:'' disabled:true}]});

演示:http://plnkr.co/edit/SbN3lJNjvXrE26UyVl6j?p=预览

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.

解决方案

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

这篇关于Angular 反应形式 [disabled] 属性不适用于基于另一个文本字段有效性的文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！