表单验证的实现

时间：2021-09-04 来源：互联网编辑：宝哥软件园浏览：次

表单创造了一种有效且引人注目的数据输入体验。角度表单协调一组数据绑定控件并跟踪更改。验证输入的有效性并显示错误消息。

接下来，主要内容有：

1.使用组件和模板构建角形表单；

2.使用ngModel创建数据绑定，以读写输入控件的值。

建筑角形

我们希望构建一个包含三个字段的表单：姓名、电话号码和专业

1.我们可以参考快速启动创建一个名为forms的新项目，或者用之前的项目修改它；

2.创建人员类；

3.创建控制此表单的组件；

4.使用初始表单布局创建模板；

5.使用ngModel双向数据绑定语法将数据属性绑定到每个表单控件。

创建人员类

在app文件夹下创建hero.ts文件，内容为

导出类Person { constructor(public id : number，public name:string，public ownpower:string，public power？string //可填可不填，可选？不能省略){ } }//创建一个类并定义它的属性。TypeScript编译器为每个公共构造函数参数生成一个公共字段，并在创建新的Person实例时自动为这些公共字段分配参数。

创建表单组件

在app文件夹下创建英雄形态组件. ts文件：

从“@angular/core”导入{ Component }；从导入{Person}。/hero '；//引入hero.ts中的Person类@组件({moduleid:module.id，//属性)设置基址，用于从相对路径加载form.html模板文件selector :‘hero-form’。//在模板中创建并添加英雄形态标签。模板网址： './form . html '//在模板上添加form.html的内容})导出类英雄组件{powers=['唱歌'，'跳舞'，'弹琴'，'画画']；模特=新人(1，“小明”，“跳舞”，this . powers[2])；//实例化提交=falseonsubmit(){ this . submit=true；} get diagnostic(){ return JSON . stringify(this . model)；}//这个暂时忽略。}1.这段代码导入了Angular核心库和我们刚刚创建的Person模型；

2.@Component装饰器的选择器将英雄表单标签放入父模板中；

3.基址在moduleId:module.id属性中设置，用于加载templateUrl从相对模块路径；

4.templateUrl属性指向一个独立的HTML模板文件，并使用一个外展模板；

5.Bit模型和powers为演示提供虚假数据；

6.在最后添加诊断属性，她返回这个模型的JSON形式。用于开发过程中的调试。

修改app.module.ts启动文件

从“@angular/core”导入{ NgModule }；从“@angular/platform-browser”导入{ BrowserModule }；从“@angular/forms”导入{ forms module }；//从“”导入表单导入{appcomponent1}。/app.component '；从“”导入{HeroFormComponent}。/hero-form.component '；//导入新添加的组件类//导入HeroformComponent @ ng module({ import s :[browser module，forms module//form template]in hero-form.component . ts，Declarations :[AppComponent 1，HeroformComponent//类名]，Bootstrap : [AppComponent 1]})导出类AppModule {} 1。导入表单模块和新组件HeroformComponent

2.将FormModule添加到ngModel装饰器的imports列表中，这样应用程序就可以访问模板驱动表单的所有功能，包括ng model；

3.将HeroFormComponent添加到ngModule装饰器的声明列表中，使HeroFormComponent在整个模块中可见。

修改应用程序。collaboration.ts文件

从“@angular/core”导入{ Component }；@ component({ selector : ' my-app '，//在index.html//package英雄表单/英雄表单模板中创建并添加my-app标签3360 `英雄表单/英雄表单`//在模板中添加此标签(英雄表单中的内容)}) export class app component1 <

创建初始的HTML表单模板，即上面提到的form.html文件

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题形式表单/title/head dydiv class=' container ' h1个人信息/h1 form div class='form-group '标签为='name '姓名/label input type=' text ' id=' name ' required class=' form-control '/div div class=' form-group ' label for=' own power '特长/标签输入类型=' text ' class=' form-control ' id=' own power '/div div class=' form-group '标签为='电源'能力选择/label select class=' form-control ' id=' power '必需！-循环- option *ngFor='让幂幂[value]=' pow ' { pow } }/option/select/div按钮类型='submit' class='btn btn-success '提交/button /form/div/body/html我们可以使用钢性铸铁来美化表单，在index.html里面引入样式表文件

！-样式表- link rel='样式表href='css/bootstrap.min.css '显示的效果为

使用ngModel进行双向数据绑定[(n型号)]语法

修改form.html文件，拿姓名做个实例

div class='form-group '标签为='name '姓名，显示为{{model.name}}/label输入类型='text' id='name '必需的类=' form-control '[(ng模型)]=' model。name ' name=' name ' # name 1=' ng model '！-双向绑定：{{model.name}} -！-使用ngModwl进行双向绑定，其绑定了模型。名称，所以所有有模型。名字的都可以同时变化- /div效果为