如何在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>