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.

Can you share the complete HTML form code? – Karthick Manoharan Feb 21 '18 at 10:24 — Karthick Manoharan, Feb 21 '18 at 10:24
I edited the post @KarthickManoharan , thanks. – JoseJimRin Feb 21 '18 at 10:56 — JoseJimRin, Feb 21 '18 at 10:56

score 4 · Accepted Answer · answered Feb 22 '18 at 16:09

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>

Is there a way to do it Not in the template? Yes with `combineLatest`. See https://stackoverflow.com/a/46103424/848755 — hugomosh, Apr 24 '20 at 20:01

score 3 · Answer 2 · answered Feb 21 '18 at 11:45

3

you try with ngOnChanges like this

in typescript

ngOnChanges() {
 this.signIn = false;
    this.form = this.fb.group({
      uname: [null, Validators.compose([Validators.required])],
      password: [null, Validators.compose([Validators.required])]
    });
  }

in html

 <button [class]="put your condition here" type="submit" [disabled]="!form.valid">Login</button>

no need of this one

 'button': [false, Validators.requiredTrue]

answered Feb 21 '18 at 11:45

Soumya B. Athani

378
1
3
13

First of all, thank you by your time. But this solution not works for this scenario because I need to have an asynchronous flag to ensure that the buttton can be enabled. The problem here is about how can I use this flag, tested ok, to validate the form control of 1st condition and 2nd. I do not know how to "binding" the variable button to the formGroup Validator. – JoseJimRin Feb 21 '18 at 12:27
Why you want to add button to validator explain me clearly – Soumya B. Athani Feb 21 '18 at 12:35
Finally I solved the problem Soumya. Posted below. Thank you. – JoseJimRin Feb 22 '18 at 16:10

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

2 Answers2