Angular2 RC - troubleshot無効ボタン

Question

これらは私が何か間違ったことをやった場合、私はそれを修正することができるようにそう教えてください:)

を私は[diabled]作るためにいくつかの問題を持って、ここで私の最初の質問ですタグはフォームのボタンで正しく機能します。

ここに私のテンプレート：

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

そして、ここに私のコンポーネント：

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() { 

    } 
} 

私の二つの入力のログインとパスワードが空で、それにNG-無効なプロパティを持って、ボタンが無効です。 しかし、私は入力を埋める場合、彼らはng有効なプロパティを持っていますが、私のボタンはまだ無効にreamin、私はなぜフォームが入力が満たされたときに有効なので知っている。 誰かがアイデアを持っている場合： 他の情報が必要な場合は、私はそれに答えようとします。

読んでいただきありがとうございます。

よろしく、

Answer 1

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

、私はisValidプロパティの処理方法を知っていて、それが該当するものにしません。 。フォームの状態（loginForm）とそのvalidプロパティに直接依存することができます。私はこれが動作すると思います

Answer 2

、あなたはむしろあなたがform.dirtyチェックに行うことができます...のisValid上送信ボタンを無効にすることはできません

<button type="submit" (click)="goLogin()" value="submit" class="" [disabled]="!loginForm.form.valid"><img width="25px" src="imgs/start_service.png" alt="login_button"></button>