sketch7/ngx.command

Command pattern implementation for angular. Command used to encapsulate information which is needed to perform an action.

ngx.command's Issues

Unexpected delay with disable button at page launch

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.');
  }
}

Add parameter to execute and canExecute

Hi! Thanks for your command pattern!

I would like to be able to provide parameter(s) to the execute and canExecute method so we can for example, edit an item in a grid:

var editCommand = new Command((selectedItem) => {....}, (selectedItem) => {... });

Is there any way to easily achieve this?