Unexpected delay with disable button at page launch

[llgarrido]

Hi.

Happy to discover this implementation for angular.

I am testing this library on a simple application with a reactive form including invalid fields and I realized that the button with the command directive don't becomes disabled immediately after the page has been loaded.

I even have the same result If I use a BehaviorSubject(false) for the canExecute parameter.

Would someone please help me figure out what I am missing here?

Thanks in advance.

AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';
import { CommandModule } from '@ssv/ngx.command';
import { PleaseWaitComponent } from './shared/please-wait/please-wait.component';

@NgModule({
  declarations: [
    AppComponent,
    PleaseWaitComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    CommandModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html`:

<div class="row">
  <div class="col-xs-12 col-md-6 col-md-offset-3">
    <form [formGroup]="form">
      <div class="form-group">
        <label form="email">E-mail</label>
        <input type="email" formControlName="email" class="form-control">
      </div>
      <div class="form-group">
        <label form="password">Password</label>
        <input type="password" formControlName="password" class="form-control">
      </div>
      <div>
        <button class="btn btn-primary" type="button" [ssvCommand]="submitCommand" >Submit</button>
      </div>
    </form>
    <div style="text-align: center;" *ngIf="submitCommand.isExecuting">
      <app-please-wait></app-please-wait>
    </div>
  </div>
</div>

app.component.ts:

import { OnInit } from '@angular/core';
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { CommandAsync, canExecuteFromNgForm } from "@ssv/ngx.command";
import { ICommand } from '@ssv/ngx.command/command.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit  {
  title = 'command-design-pattern-example';
  form: FormGroup;
  submitCommand : ICommand;
  //isValid$ = new BehaviorSubject(false);

  constructor() {
    this.form = new FormGroup({
      'email': new FormControl(null, [Validators.required, Validators.email]),
      'password': new FormControl(null, [Validators.required, Validators.minLength(6)])
    });
    this.submitCommand = new CommandAsync(this.submit.bind(this), canExecuteFromNgForm(this.form));
   }

  ngOnInit(): void {

  }

  private sleep(milliseconds:number) {
    return new Promise(resolve => setTimeout(resolve, milliseconds));
  }

  async submit() {
    console.log('Submiting...');
    await this.sleep(2000);
    console.log('Submited.');
  }
}

[stephenlautier]

From the looks of it your syntax seems good. 2 minor differences generally we do have different

• We don't use ICommand which is not exported. Just noticed the ICommand model is not being exported, will try to export that one, try for now use the class for now CommandAsync
• We don't use async/await for the execute

That said both of those shouldn't affect it, so strange

Just tested and it seems to be working fine for me (with new BehaviorSubject(false) Theres an example project within the repo which is: https://github.com/sketch7/ngx.command/tree/master/ngx.command

Can you try to run that, and see if it works fine there?

Just change isValid$ = new BehaviorSubject(false);

We also use it in prod products quite extensively, even with reactive forms so it should work

[stephenlautier]

Should be better now in 1.5.2