Angular2 RC - Störungsbehebung deaktiviert Taste

Question

diese ist meine erste Frage hier, also bitte sagen Sie mir, wenn ich etwas falsch gemacht habe, so kann ich es beheben könnte :)

Ich habe ein Problem bekommt die [diabled] zu machen Tag funktioniert ordnungsgemäß auf einer Schaltfläche in meinem Formular.

hier meine Vorlage:

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

Und hier meine Komponente:

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

    } 
} 

Wenn mein zwei Eingänge Login und Passwort leer ist, bekam die ng-ungültige Eigenschaft auf, und die Taste deaktivieren . Aber wenn ich die Eingaben fülle, haben sie die ng-valid -Eigenschaft, aber meine Schaltfläche ist noch deaktiviert, und ich weiß nicht warum, weil das Formular gültig ist, wenn die Eingaben gefüllt sind. Wenn jemand eine Idee hat, bitte :) Wenn Sie weitere Informationen benötigen, werde ich versuchen, sie zu beantworten.

Danke fürs Lesen.

Grüße,

Answer 1

würde ich die Basis-Unterstützung auf Inline-Form Angular2 folgenden verwenden:

<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 Ihrem Fall, ich weiß nicht, wie das isValid Eigentum behandelt wird und zu dem, was es entspricht . Sie können sich direkt auf den Formularstatus (loginForm) und seine valid-Eigenschaft verlassen.

Answer 2

ich denke, das wird funktionieren,

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