Question

下面的

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

 <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

disabled属性不适用于活动表单中的表单控件。你需要手动＆＃34;启用和禁用表单字段。这可以通过我能想到的几种方式完成。在valueChanges字段上使用mobile，然后根据otp字段的有效性停用/启用mobile字段。

我喜欢听一些变化事件，其中(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}]
});

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

Answer 2

你可以说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>

将验证整个表格是否有效。

对于单个表单字段，它们也有有效且无效的字段

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

角度反应形式[禁用]属性不适用于基于另一文本字段的有效性的文本字段

2 个答案: