Angular 反应形式 [disabled] 属性基于另一个文本字段的有效性不适用于文本字段

Question

下面是 angular 反应式表单字段的代码片段。该按钮保持禁用状态，直到我在移动字段中有效输入，但同样不适用于文本字段。在我向移动字段输入有效输入之前，我希望禁用第二个输入文本字段。

 <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>

文本字段是否还有其他方法，或者我是否遗漏了什么？感谢任何帮助。

谢谢。

Answer 1

你可以像下面这样说 form.invalid

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

这将验证整个表单是否有效。

对于individual form 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>

对于输入字段，如果直接不起作用，您可以将它们放在 div 中并隐藏它们

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

Answer 2

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

我喜欢听一些变化事件，其中(keyup)可能最适合这里。您可以在模板中调用方法或使用方法的内容。我喜欢保持模板干净并处理组件中的逻辑。因此，您可以为 mobile 字段设置一个事件：

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

然后是对应的方法：

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

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

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

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

Angular 反应形式 [disabled] 属性基于另一个文本字段的有效性不适用于文本字段

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

angular

angular-reactive-forms