Angular2 RC - troubleshot disabled button

Question

these is my first question here, so please tell me if i've done something wrong so i could fix it :)

I've got some problem to make the [diabled] tag work correctly on a button in my form.

here my template :

<form #loginForm="ngForm">
      <label class="omwave">Identifiant</label>
      <input type="text" class="omwave" [(ngModel)]="login" placeholder="Identifiant" name="login" required>
      <label class="omwave">Mot de passe</label>
      <div class="input-group omwave">
        <input type="password" class="input-group-field omwave" [(ngModel)]="password" placeholder="Mot de passe" name="password" required>
        <div class="input-group-button">
          <button type="submit" (click)="goLogin()" value="submit" class="" [disabled]="!isValid"><img width="25px" src="imgs/start_service.png" alt="login_button"></button>
        </div>
      </div>
    </form>

And here my component :

import {Component} from '@angular/core';
import {FORM_DIRECTIVES, NG_VALIDATORS, Validators, Control} from "@angular/common";

@Component({
  selector: 'login',
  templateUrl: 'app/core/templates/login.html',
  directives: [FORM_DIRECTIVES]
})

export class LoginComponent {
  protected login: string;
  protected password: string;

  constructor() {

  }
}

When my two input login and password are empty, got the ng-invalid property on it and the button is disable. But if i fill the inputs, they got the ng-valid property but my button still reamin disabled, and i d'ont know why because the form is valid when the inputs are filled. If someone has an idea please :) If you need any other informations, i'll try to answer it.

Thanks for reading.

Regards,

Answer 1

I would use the following based on inline form support of Angular2:

<form #loginForm="ngForm">
  <label class="omwave">Identifiant</label>
  <input type="text" class="omwave" [(ngModel)]="login" 
         placeholder="Identifiant" name="login"
         ngControl="name" required> <--------
  <label class="omwave">Mot de passe</label>
  <div class="input-group omwave">
    <input type="password" class="input-group-field omwave" 
         [(ngModel)]="password" placeholder="Mot de passe"
         ngControl="password" name="password" required> <-------
    <div class="input-group-button">
      <button type="submit" (click)="goLogin()" value="submit" 
          class="" [disabled]="!loginForm.valid"> <------
        <img width="25px" src="imgs/start_service.png" alt="login_button">
      </button>
    </div>
  </div>
</form>

In your case, I don't know how the isValid property is handled and to what it corresponds. You can directly rely on the form state (loginForm) and its valid property.