Angular2 RC - troubleshot禁用按鈕

這是我的第一個問題在這裏，所以請告訴我，如果我做錯了什麼，所以我可以修復它:)Angular2 RC - troubleshot禁用按鈕

我有一些問題，使[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有效的屬性，但我的按鈕仍然殘疾，我知道爲什麼，因爲當輸入填充時，表單是有效的。如果有人有一個想法，請:) 如果您需要任何其他信息，我會盡力回答它。

感謝您的閱讀。

問候，

來源

2016-06-29 Mokette

....爲什麼那麼即使在字段中的一個變化使得形式髒...但更改後用戶應該知道當前表格的驗證 – mayur

我會使用基於內嵌的形式支持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屬性。

來源

2016-06-29 09:38:33

非常感謝Thierry！ :) 在我的輸入上添加[ngControl] =「login」和[ngControl] =「password」，並將[disabled] =「！isValid」改爲[disabled] =「！loginForm.valid」好！ – Mokette

我認爲這會工作，你無法禁用提交的isValid按鈕..而是你可以form.dirty檢查做

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

來源

2016-06-29 09:57:39 micronyks

可悲沒有micronyks，我試過這個原因，我在另一篇文章中看到它，但不起作用：s – Mokette

Angular2 RC - troubleshot禁用按鈕

回答

相關問題