使用NgModel angular 7进行表单验证

NgModel是Angular框架中的一个指令，用于实现双向数据绑定和表单验证。它可以将表单控件的值与组件中的属性进行绑定，同时还可以对表单进行验证。

NgModel的使用步骤如下：

1. 导入FormsModule：在使用NgModel之前，需要先在模块中导入FormsModule，以便使用相关的指令和服务。

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    FormsModule
  ],
  ...
})
export class AppModule { }

1. 在表单控件上应用NgModel指令：在需要进行数据绑定和验证的表单控件上，使用NgModel指令，并通过ngModel绑定一个组件中的属性。

<input type="text" [(ngModel)]="username" name="username" required>

上述代码中，ngModel指令与[(ngModel)]绑定了组件中的username属性，实现了双向数据绑定。

1. 添加验证规则：可以通过添加HTML5的验证属性或Angular的验证指令来定义表单控件的验证规则。

<input type="text" [(ngModel)]="username" name="username" required minlength="5" maxlength="10">

上述代码中，required属性表示该字段为必填项，minlength和maxlength属性分别表示最小长度和最大长度。

1. 显示验证结果：可以通过NgModel的valid属性来判断表单控件的验证结果，并根据需要进行相应的处理。

<input type="text" [(ngModel)]="username" name="username" required>
<span *ngIf="!username.valid">用户名不能为空</span>

上述代码中，*ngIf指令根据username.valid属性的值来决定是否显示错误提示信息。

总结一下，NgModel是Angular框架中用于实现双向数据绑定和表单验证的指令。通过将NgModel应用于表单控件，并设置相应的验证规则，可以实现对表单的数据绑定和验证。在实际应用中，可以根据具体需求选择合适的验证规则和处理方式。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云云服务器（CVM）：提供弹性计算能力，满足各类业务需求。
• 腾讯云云数据库 MySQL：高性能、可扩展的关系型数据库服务。
• 腾讯云对象存储（COS）：安全可靠的云端存储服务，适用于图片、音视频、文档等数据的存储和管理。
• 腾讯云人工智能：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。
• 腾讯云物联网（IoT）：提供全面的物联网解决方案，帮助用户快速构建物联网应用。
• 腾讯云区块链服务（BCS）：提供高性能、可扩展的区块链服务，支持多种场景的应用。
• 腾讯云视频处理（VOD）：提供视频上传、转码、截图等功能，满足视频处理和分发的需求。

请注意，以上仅为腾讯云相关产品的介绍，不涉及其他云计算品牌商。