您的位置是:网站首页>Javascript编程Javascript编程

深入了解Angular中的表单

少儿编程网2021-06-01 16:17:33Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介本篇文章给大家详细介绍一下Angular中的表单。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。Angular表单什么是模板式表单表单的数据模型是通过组件模板中的相关指令来定义的,因为使用这种方式定义表单的数据模型时,我们会受限于HTML的语法,所以模板驱动方式只适合用于一些简单的

本篇文章给大家详细介绍一下Angular中的表单。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。OCy少儿编程网-https://www.pxcodes.com

OCy少儿编程网-https://www.pxcodes.com

Angular 表单


什么是模板式表单

表单的数据模型是通过组件模板中的相关指令来定义的, 因为使用这种方式定义表单的数据模型时, 我们会受限于 HTML 的语法, 所以模板驱动方式只适合用于一些简单的场景。OCy少儿编程网-https://www.pxcodes.com

什么是响应式表单

响应式表单提供了一种模型驱动的方式来处理表单输入, 其中的值会随时间而变化。 使用响应式表单时, 通过编写 TypeScript 代码而不是 HTML 代码来创建一个底层的数据模型, 在这个模型定义好以后, 使用一些特定的指令, 将模板上的 HTML 元素与底层的数据模型连接在一起。
注意:OCy少儿编程网-https://www.pxcodes.com

  • 数据模型并不是一个任意的对象, 它是一个由 angular/forms 模块中的一些特定的类, 如 FormControl, FormGroup, FormArray 等组成的。 在模板式表单中, 是不能直接访问到这些类的。【相关推荐:《angular教程》】OCy少儿编程网-https://www.pxcodes.com

  • 响应式表单并不会替你生成 HTML, 模板仍然需要自己来编写。OCy少儿编程网-https://www.pxcodes.com

  • 模板式表单中, 是不能访问数据模型的相关类的, 只能拿到表单**终的数据; 在响应式表单中, 是可以访问数据模型相关的类, 但由于它们是不可引用的, 故不能在模板中进行操作, 只能在 TypeScript 代码中进行操作。OCy少儿编程网-https://www.pxcodes.com

响应式表单

OCy少儿编程网-https://www.pxcodes.com

FormGroupOCy少儿编程网-https://www.pxcodes.com

FormGroup 既可以代表表单的一部分, 又可以代表整个表单, 它是多个 FormControl 的集合。 FormGroup 将多个 FormControl 的值和状态聚合在一起, 在表单校验中, 如果FormGroup 中有一个 FormControl 是无效的, 那整个 FormGroup 都是无效的。OCy少儿编程网-https://www.pxcodes.com

FormControlOCy少儿编程网-https://www.pxcodes.com

FormControl 是构成表单的基本单位, 通常情况下用来代表一个 input 元素, 但是也可以用来代表一个更复杂的组件, 如日历, 下拉选择框。 FormControl 保存着与其关联的 HTML 元素的当前值以及元素的校验状态, 还有元素是否被修改过等信息。OCy少儿编程网-https://www.pxcodes.com

FormArrayOCy少儿编程网-https://www.pxcodes.com

FormArray 与 FormGroup 类似, 但是它有长度属性。 一般来说, FormGroup 用来代表整个表单或者表单字段的一个固定子集; 而 FormArray 通常用来代表一个可以增长的字段集合。OCy少儿编程网-https://www.pxcodes.com

表单校验

Angular 内置校验器OCy少儿编程网-https://www.pxcodes.com

Angular为我们提供了几个内置校验器, 下面是比较常用的校验器:OCy少儿编程网-https://www.pxcodes.com

  • Validators.required - 表单控件值非空
  • Validators.email - 表单控件值的格式是 email
  • Validators.minLength() - 表单控件值的**小长度
  • Validators.maxLength() - 表单控件值的**大长度
  • Validators.pattern() - 表单控件的值需匹配pattern对应的模式(正则表达式)

自定义响应式表单校验器OCy少儿编程网-https://www.pxcodes.com

在实际的开发中, 为了满足项目的需求, 我们需要自定义一些校验器。 一般情况下, 可以将校验函数定义成如下形式:OCy少儿编程网-https://www.pxcodes.com

xxxxValidator(control: AbstarctControl): {[key: string]: any} {    
      // TODO 编写校验规则   
      return null;  
 }

下面以常见的注册页面为例:OCy少儿编程网-https://www.pxcodes.com

初始化表单OCy少儿编程网-https://www.pxcodes.com

ngOnInit(): void {  
     this.formModel = this.fb.group({    
	username: ['', [Validators.required, Validators.minLength(6)]],    
	// 密码    
	passwordsGroup: this.fb.group({     
	       password: [''],  
	       passwordConfirm: [''] 
	       }, { validator: this.equalValidator }),    
        // 手机号    
        mobile: ['', this.moblieValidator]  });
 }

编写校验器OCy少儿编程网-https://www.pxcodes.com

// 手机号码校验
moblieValidator(control: AbstractControl): any {  
   const reg = /^((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+d{8}$/;  
   const valid = reg.test(control.value);  
   console.log('mobile的校验结果:', valid); 
   return valid ? null : { mobile: true };
}

// 密码校验
equalValidator(group: FormGroup): any {  
   const password = group.get('password') as FormControl;  
   const passwordConfirm = group.get('passwordConfirm') as FormControl;  
   const valid = password.value === passwordConfirm.value;  
   console.log('密码校验结果', valid);  
   return valid ? null : { equal: true };
} 

Angular 异步校验器OCy少儿编程网-https://www.pxcodes.com

Angular的表单 API 还支持异步校验器, 异步校验器可以调用远程的服务来检查表单的字段的值。 异步校验器与普通校验器类似, 也是一个方法, **不同的是异步校验器返回的不是一个对象, 而是一个可观测的流。OCy少儿编程网-https://www.pxcodes.com

moblieAsyncValidator(control: AbstractControl): Observable<any> {  
   const reg = /^((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+d{8}$/;  
   const valid = reg.test(control.value);  
   console.log('mobile的校验结果:', valid); 
   return of(valid ? null : { mobile: true }); 
 }

Angular 状态字段OCy少儿编程网-https://www.pxcodes.com

  • toucheduntouched

这两个字段表示用户是否访问过字段, 也就是这个字段是否获得焦点。 一般用于表单错误提示信息是否显示。 同时, 如果有任何一个字段是 touched, 那整个表单的 touched 属性就是 true; 只有所有字段是 untouched 时, 整个表单的 untouched 属性才是 true。OCy少儿编程网-https://www.pxcodes.com

  • pristinedirty

如果一个字段的值从来没有改变过, 那么它的 pristine 就是 true, dirty 就是 false; 反之, 如果字段的值被修改过, 那么它的pristine 就是 false, dirty 就是 true。 同时, 如果任何一个字段是 dirty, 那么整个表单的 dirty 属性就是 true; 只有所有字段是 pristine 时, 整个表单的 pristine 属性才是 true。OCy少儿编程网-https://www.pxcodes.com

  • pending

当一个字段处于异步校验时, 该字段的 pending 属性是 true。OCy少儿编程网-https://www.pxcodes.com

自定义模板式表单的校验器

在响应式表单里, 我们后台有一个编码的数据模型, 只需要将校验器的方法挂在指定字段属性上就可以了。 但是, 在模板式表单里, 后台是没有这类数据模型的, 指令才是**能用的东西, 所以我们需要将校验方法包装成指令, 然后才能在模板中使用它。OCy少儿编程网-https://www.pxcodes.com

编写指令OCy少儿编程网-https://www.pxcodes.com

@Directive({  
   selector: '[mobile]', 
    providers: [{provide: NG_VALIDATORS, useValue: moblieValidator, multi: true}]})
 export class MobileValidatorDirective {  
    constructor() { }
 }
 
// html中引用
<div>  手机号:<input ngModel type="number" name="mobile" mobile required></div>

mutli: true :指的是在 NG_VALIDATORS 这个 Token 下可以挂不同 useValue 属性所表示的值。OCy少儿编程网-https://www.pxcodes.com

注意: 在模板式表单中, 是不可以在模板中使用字段的状态属性的。 模板式表单与响应式表单不同, 它的模型的值和它状态的变更是异步的, 而且很难控制。
如果想要使用字段的状态属性,我们可以进行如下操作:OCy少儿编程网-https://www.pxcodes.com

// .html文件中
<div>  
   用户名:<input ngModel type="text" minlength="6" name="username" (input)="onUsernameInput(myForm)" required>
</div>
<div [hidden]="usernameValid || usernameUntouched">  
    <div [hidden]="!myForm.form.hasError('required', 'username')">
      用户名是必填项!
    </div>  
    <div [hidden]="!myForm.form.hasError('minlength', 'username')">
      用户名长度至少是6位!
    </div>
</div>
// .ts文件中
usernameValid = true; 
usernameUntouched = true; 
onUsernameInput(form: NgForm): void {  
   if (form) {
      this.usernameValid = form.form.get('username').valid;    
      console.log('valid', this.usernameValid);          
      this.usernameUntouched = form.form.get('username').untouched;   
      console.log('untouched',   this.usernameUntouched);
    }
}

小结: 在使用字段的状态属性时, 响应式表单比模板式表单更方便,可以节省很多代码,而且比较可控。所以模板式表单适合用于一些简单的场景。OCy少儿编程网-https://www.pxcodes.com

更多编程相关知识,请访问:编程视频!!

以上就是深入了解Angular中的表单的详细内容,更多请关注少儿编程网其它相关文章!OCy少儿编程网-https://www.pxcodes.com

来源:php中文网OCy少儿编程网-https://www.pxcodes.com


相关文章:

支持一下 ( )

深入了解Angular中的表单

      匿名评论
    • 评论
    人参与,条评论
    深入了解Angular中的表单

微信公众号

免费视频教程

先知道