角4個隱藏DIV不能正常工作

我目前正在試圖讓使用引導4一個簡單的登錄表單/角4.一點是，立足我的HTML模板上https://angular.io/docs/ts/latest/guide/forms.html提供的文檔，我不能得到錯誤信息工作如果輸入是空的。這是我到目前爲止有：角4個隱藏DIV不能正常工作

<label>User Name:</label> 
<input id="name" 
    #name 
    placeholder="user name" 
    class="form-control mb-md-3" 
    (keyup.enter)="login(name.value, password.value)" 
    name="username" 
    required> 
<div [hidden]="!name.valid || !name.pristine" 
    class="alert alert-danger">User name is required</div>

我不知道我是否需要有雙向綁定到一個模型或任何東西，我不完全理解的文檔。如果有幫助，我有這方面的類：

export class User { 
    constructor(
    public id: number, 
    public name: string, 
    public password: string 
) {} 
}

而且，現在這不會對服務或任何東西，它只是一個小的演示屏幕，將支持路由。

來源

2017-05-03 Manuel Santiago Yépez

是的，你應該有2路結合。你不應該自己處理鍵盤提交。只需在表單上使用ngSubmit，然後添加一個提交按鈕，並且它將以本機方式工作。 –

您應該使用ngModel指令。這可以綁定到某個對象，或者只會使.invalid，.valid等等可用於您。此外，你應該引用這個ngModel，而不是輸入元素。

這工作：

<label>User Name:</label> 
<input id="name" 
    #name="ngModel" 
    placeholder="user name" 
    class="form-control mb-md-3" 
    (keyup.enter)="login(name.value, password.value)" 
    name="username" required 
    ngModel> 
<div *ngIf="name.invalid && name.dirty" class="alert alert-danger">User name is required</div>

來源

2017-05-03 18:23:09 Gauss

只是一件事：這會將輸入值提交到URL中。由於我有密碼字段，有沒有辦法避免這種情況？在表單中添加method =「post」會給我一個404錯誤。我應該添加什麼？ –

嗯，我不知道你的login（）方法是如何工作的，因爲問題是關於Angular Forms的。我建議你打開另一個問題並解釋更廣泛的背景。 – Gauss

角4個隱藏DIV不能正常工作

回答

相關問題