如何在Angular 2中实现输入验证

Question

如何使这些输入在提交时显示诸如"需要"之类的消息（因此，禁用了提交按钮，直到内部有名称）通过angular2 formsmodule？

<form class="">
    <div>
        <p>Name:</p>
        <input type="text">
    </div>
    <div class="link-input">
        <p>City:</p>
        <input type="text">
    </div>
    <button 
        (click)="submitForm()">
        Submit
    </button>
</form>

Answer 1

遵循此样本：

<form [formGroup]="registerForm" (ngSubmit)="submitForm(registerForm)"   novalidate>
    <div>
        <p>Name:</p>
        <input type="text">
        </div>
        <div class="link-input">
            <p>City:</p>
            <input formControlName="username" type="text">
                <em for="username" [hidden]="showError(registerForm.controls.name)" class="invalid">        You left this field blank or email format is not correct</em>
            </div>
            <button type="submit" >Submit</button>
</form>

组件：

showError(field: FormControl){
        if(!field)
            return true;
        return field.valid || (field.pristine && !field.touched && !this.submitted)
    }
submitForm(f: NgForm) {
    this.submitted = true;
    if(!f.valid)
        return;
}

Answer 2

只需添加检查表格是否有效，否则禁用按钮

<button type="submit" class="btn btn-danger" [disabled]="!f.valid">Save to List</button>