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

Question

Scenario

I am trying to disable [disabled] a button and select a class [ngClass] through two conditions:

1st: Input text is required.

2nd: Asynchronous flag is requiredTrue. I have a dependency about demand a challenge against a remote server which is the trigger to enable this button.

Well, I am using a formGroup validation like this:

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

1st condition = inputSMS; 2nd = button.

In my HTML I use this code for 1st condition:

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

And this for 2nd:

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

Problem

I recieved correctly the asynchronous flag with a subject. I checked it. And 1st condition is true. But I do not know why is not enables button when conditions are true. It is as if is not detecting event changes. I only used ngModel with inputs but I am not sure if i could use it here. Do you know how can I resolve it?

Thank you.

Answer 1

Problem solved

Finally, I solved this problem not using FormGroup. Due to I have an observable to notify if the challenge arrived I used two different controls. One of them is known control "form.valid" and the another one is an attribute of the class which it is updates when reponse of the observable arrives. Then I set this two properties as conditions. Here code:

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