这篇文章给大家分享的是有关Angular2。js如何实现表单验证的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
js的作用是什么 1,能够嵌入动态文本于HTML页面。2,对浏览器事件做出响应。3,读写HTML元素。4、在数据被提交到服务器之前验证数据。5,检测访客的浏览器信息。6,控制饼干,包括创建和修改等7,基于node . js技术进行服务器端编程。
表单创建一个有效,引人注目的数据输入体验.Angular表单协调一组数据绑定控件,跟踪变更。验证输入的有效性,并且显示错误信息。
接下来,主要内容有:
1,使用组件和模板构建角表单;
2,用ngModel创建数据绑定,以读取和写入输入控件的值。
<强>构建角表单
我们想构建包含姓名:电话,特长三个字段的表单
1,我们可以参照快速启动那篇,创建一个名为形式的新项目,也可以使用之前的项目进行修改。
2,创建人类;
3,创建控制此表单的组件;
4,创建具有初始表单布局的模板;
5,使用ngModel双向数据绑定语法把数据属性绑定到每个表单控件中。
<>强创建人类
在应用文件夹下创建英雄。ts文件,内容为
export class 人{
构造函数(才能
,,,public id:数字,
,,,public 名称:字符串,
,,,public ownpower:字符串,
,,,public 权力?:string //可填可不填,可选的,?不能省略
){}才能
}//创建一个类,定义它的属性 打印稿编译器为每个公共构造函数参数生成一个公共字段,在创建一个新的人实例时,自动把参数赋给这些公共字段。
<>强创建表单组件
在应用文件夹下创建hero-form-component。ts文件:
import {, Component },得到& # 39;@angular/核心# 39;;
import {}的人,得到& # 39;。/英雄# 39;,,//引入hero.ts中类的人
@ component ({
moduleId才能:module.id,//属性设置了基地址,用于从相对路径加载form.html模板文件
,,选择器:& # 39;hero-form& # 39;//在模板中创建添加& lt; hero-form>标签
templateUrl才能:& # 39;. ./form.html& # 39;//模板上增加form.html里面的内容
})
export class HeroFormComponent {
权力才能=[& # 39;唱歌& # 39;,& # 39;跳舞& # 39;,& # 39;弹琴& # 39;,& # 39;画画& # 39;];
模型才能=new 人(1 & # 39;小明& # 39;,& # 39;跳舞& # 39;,this.powers[2]);//实例化
提交才能=false;
onsubmit才能(){this.submitted=true;}
get 才能;诊断(){return JSON.stringify (this.model);},//这个先暂时不管
} 1,这段代码导入了角核心库以及我们刚刚创建的人模型;
2, @ component装饰器的选择器将& lt; hero-form>标签把这个表单放进父模板;
3, moduleId: module.id属性设置了基地址,用于从相对模块路径加载templateUrl;
4, templateUrl属性指向一个独立的HTML模板文件,使用外联模板;
5位模型和权力提供了演示用的假数据;
6,在最后增加诊断属性,她返回这个模型的JSON形式。在开发过程中用于调试。
修改app.module。ts启动文件
import {, NgModule },得到& # 39;@angular/核心# 39;;
{},BrowserModule import 得到& # 39;@angular/platform-browser& # 39;;
import {FormsModule},得到& # 39;@angular/形式# 39;;//导入表单
{},AppComponent1 import 得到& # 39;。/app.component& # 39;;
进口{HeroFormComponent},得到& # 39;。/hero-form.component& # 39;;//导入新增加的组件类//导入hero-form.component.ts中的HeroFormComponent
@NgModule ({
进口:,
BrowserModule才能,
FormsModule //表才能单模板
),
声明:,
AppComponent1 ,才能
HeroFormComponent 才能;//类名
),
引导:[AppComponent1]
})
{export class AppModule } 1,导入FormsModule和新组件HeroFormComponent;
2,把FormModule添加到ngModel装饰器的进口列表中,这样应用就能访问模板驱动表单的所有特性,包括ngModel;
3,把HeroFormComponent添加到ngModule装饰器列的声明表中,使HeroFormComponent组件在整个模块中可见。
修改app.component.ts文件
import {, Component },得到& # 39;@angular/核心# 39;;
@ component ({
,,选择器:& # 39;my-app& # 39;//在index . html中创建添加& lt; my-app>标签//包才能裹& lt; hero-form> & lt;/hero-form>
模板才能:“& lt; hero-form> & lt;/hero-form>//模才能板里面添加此标签(hero-form里面的内容)
})
export class AppComponent1 {}
