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

如何通过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>

姓名：

城市：

提交

遵循以下示例：

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

---

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

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

保存到列表

谢谢您的回答。我想做的是让表单验证模板受驱动，有没有一种简单的方法可以做到这一点。。？对不起，如果我一开始不清楚的话。据我所知，我需要在现有表单结构中添加一些属性，并为应用程序组件中的属性创建函数。另外，我的应用程序组件应该只导入FormsModule（而不是FormGroup、FormControl等），所以我需要一种不导入这两个组件的方法

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