Angular 4 : How to disable button with two condition and asynchronous flag?

Question

场景

我试图通过两个条件禁用 [disabled] 一个按钮并选择一个类 [ngClass]:

第一:需要输入文本。

第二:异步标志要求为真。我依赖于对远程服务器的请求挑战，这是启用此按钮的触发器。

好吧，我正在使用这样的 formGroup 验证:

  constructor(private fb: FormBuilder) {
     this.form = this.fb.group({
        'inputSMS': [null, Validators.required],
        'button': [false, Validators.requiredTrue]
     })
  }

第一个条件=输入短信；第二个 = 按钮。

在我的 HTML 中，我将此代码用于第一个条件:

<div class="col-xs-offset-1 col-xs-10">
  <div [formGroup]="form">
    <label class="col-xs-4 F sms-codigo-sms">SMS Code</label>
    <div class="col-xs-6">
      <input class="form-control sms-rect7" [(ngModel)]="inputSMS" formControlName="inputSMS" name="inputSMS" maxlength="20" type="numbers">
    </div>
  </div>
</div>

这是第二个:

<div class="form-group row text-center">
   <div class="col-md-12">
      <div class="btn-group">
         <button [ngClass]="!form.valid ? 'sms-btn-disabled' : 'sms-btn'" 
         type="button" style="float: left;" [disabled]="!form.valid"  
         formControlName="button" (click)="check()">Validate</button>
     </div>
 </div>

问题

我正确地收到了带有主题的异步标志。我查过了。第一个条件为真。但我不知道为什么在条件为真时不启用按钮。就好像没有检测到事件变化。我只将 ngModel 与输入一起使用，但我不确定我是否可以在这里使用它。您知道我该如何解决吗？

谢谢。

Answer 1

问题已解决

最后，我在不使用 FormGroup 的情况下解决了这个问题。由于我有一个 observable 可以通知挑战是否到达，所以我使用了两个不同的控件。其中一个是已知控件“form.valid”，另一个是类的属性，当可观察对象的响应到达时它会更新。然后我将这两个属性设置为条件。这里的代码:

<div class="btn-group">
  <button [ngClass]="(!form.valid || !buttonValidate) ? 'sms-font sms-btn-disabled' : 'sms-font sms-btn'" type="button""
    [disabled]="(!form.valid || !buttonValidate)" (click)="check()">Validate</button>
</div>