Angular响应式表单及封装表单控件

萧慢慢 發表於 2021-2-18 08:15:00

响应式表单也叫模型驱动型表单。
有三个重要元素FormControl，FormGroup和FormBuilder。还有一个FormArray。
验证器和异步验证器。
动态指定验证器。条件改变验证方式改变。
自定义FormControl。用于表单过于复杂之后，逻辑难以理清楚。把复杂问题拆成若干简单问题永远是万能钥匙。用于简化form表单自己的逻辑。
<h1>一、登录表单</h1>
<img src="https://img2020.cnblogs.com/blog/315302/202102/315302-20210218075554419-1592806477.png" alt="" width="398" height="221" loading="lazy">
多个validators:
<div>Validators.compose()返回ValidatorFn。</div>
<div>动态指定validator: </div>
<div>一开始可以不指定validator，在某些条件下动态指定validator：</div>
<div>
<div> this.form.controls['email'].setValidators(this.validate);</div>
<div>查看errors:</div>
<div><mat-error>{{form.controls['email'].errors | json}}</mat-error></div>
<div>模板：</div>
</div>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_301c386b-f22e-422f-92de-66164170932e" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_301c386b-f22e-422f-92de-66164170932e" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_301c386b-f22e-422f-92de-66164170932e" class="cnblogs_code_hide">
<pre><form ="form" (ngSubmit)="onSubmit(form,$event)">
<mat-card class="example-card">
 <mat-card-header>
 <mat-card-title>登录:</mat-card-title>
 </mat-card-header>
 <mat-card-content>
 <mat-form-field class="example-full-width" class="full-width">
 <input type="text" formControlName="email" matInput placeholder="您的email" style="text-align: right">
 <mat-error>{{form.controls['email'].errors | json}}</mat-error>
 </mat-form-field>
 <mat-form-field class="example-full-width" class="full-width">
 <input type="password" formControlName="password"matInput placeholder="您的密码" style="text-align: right">
 </mat-form-field>
 <button mat-raised-button type="submit" color="primary" ="!form.valid">登录</button>

 </mat-card-content>
 <mat-card-actions class="text-right">
 <p>还没有账户？<a routerLink="/register">注册</a></p>
 <p>忘记密码？<a href="">找回</a></p>
 </mat-card-actions>
</mat-card>

<mat-card class="example-card">
 <mat-card-header>
 <mat-card-title>每日佳句</mat-card-title>
 <mat-card-subtitle>满足感在于不断的努力，而不是现有成就。全心努力定会胜利满满。</mat-card-subtitle>
 </mat-card-header>
 <img mat-card-image src="/assets/images/quote_fallback.jpg" alt="">
 <mat-card-content>
 Satisfaction lies in the effort, not in the attainment. Full effort is full victory.
 </mat-card-content>
</mat-card>
</form></pre>
</div>
View Code</div>
组件：
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_19836464-f1e7-4ef9-8e01-f0e979d60a52" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_19836464-f1e7-4ef9-8e01-f0e979d60a52" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_19836464-f1e7-4ef9-8e01-f0e979d60a52" class="cnblogs_code_hide">
<pre>export class LoginComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder) {
// this.form = new FormGroup({
// email: new FormControl("wang@163.com", Validators.compose()),
// password: new FormControl("",Validators.required),
// })

//formBuilder不需要显示的new FormControl
this.form = this.fb.group({
 email: ["wang@163.com", Validators.compose() ],
 password:["",Validators.required]

})
}

ngOnInit(): void {

}

onSubmit(form: FormGroup, event: Event) {
event.preventDefault();
console.log(JSON.stringify(form.value));
console.log(form.valid);
}

validate(c:FormControl):{:any} | null{
if(!c.value){
 return null;
}
const pattern=/^wang+/;
if(pattern.test(c.value)){
 return null;
}else{
 return {
 emailNotValid: 'The email must start with wang'
 }
}
}

}</pre>
</div>
View Code</div>
 
<h1> 二、封装自定义表单控件</h1>
把注册表单中的图片列表抽成一个独立组件。
<img src="https://img2020.cnblogs.com/blog/315302/202102/315302-20210218080828236-618461140.png" alt="" width="379" height="212" loading="lazy">
 
 
 ng g c shared/image-list-select生成组件
<ul>
<li> 实现ControlValueAccessor接口。实现writeValue(),registerOnChange()和registerOnTouched()</li>
<li>定义一个providers，令牌NG_VALUE_ACCESSOR和NG_VALIDATORS。用useExisting加forwardRef。并且设置multi为true。</li>
</ul>
 在image-list-select中可以放开的属性有很多，有没有必要一一放开？需要权衡。
 如果想要充分的自由度的话，可以用transclude嵌入组件<ng-content></ng-content>。
 在image-list-select中隔离封装，放开有限的属性。
模板：
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_762c248f-43b4-4536-813f-1ca4d77ea5ac" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_762c248f-43b4-4536-813f-1ca4d77ea5ac" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_762c248f-43b4-4536-813f-1ca4d77ea5ac" class="cnblogs_code_hide">
<pre><div>
<span>{{title}}</span>
<mat-icon class="avatar" ="selected" *ngIf="useSvgIcon else imgSelect"> </mat-icon>
<ng-template #imgSelect>
<img ="selected" alt="image selected" class="cover">
</ng-template>
</div>

<div class="scroll-container">
<mat-grid-list ="cols" ="rowHight">
<mat-grid-tile *ngFor="let item of items; let i = index">
 <div class="image-container" (click)="onChange(i)">
 <mat-icon class="avatar" ="item" *ngIf="useSvgIcon else imgItem"></mat-icon>
 <ng-template #imgItem>
 <img ="item" alt="image item" ="{'width': itemWidth}">
 </ng-template>

 <div class="after">
 <div class="zoom">
 <mat-icon>checked</mat-icon>
 </div>
 </div>
 </div>

</mat-grid-tile>
</mat-grid-list>
</div></pre>
</div>
View Code</div>
组件：
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_90061d67-1296-43e6-8b93-7753f51fb7a9" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_90061d67-1296-43e6-8b93-7753f51fb7a9" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_90061d67-1296-43e6-8b93-7753f51fb7a9" class="cnblogs_code_hide">
<pre>import { Component, forwardRef, Input, OnInit } from '@angular/core';
import { ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
selector: 'app-image-list-select',
templateUrl: './image-list-select.component.html',
styleUrls: ['./image-list-select.component.scss'],
providers: [
{
 provide: NG_VALUE_ACCESSOR,
 useExisting: forwardRef(() => ImageListSelectComponent),
 multi: true
},
{
 provide: NG_VALIDATORS,
 useExisting: forwardRef(() => ImageListSelectComponent),
 multi: true
}
]
})
export class ImageListSelectComponent implements ControlValueAccessor {
@Input() title = "选择"
@Input() cols = 6;
@Input() rowHight = '64px'
@Input() items: string[] = [];
@Input() useSvgIcon: boolean = false;
@Input() itemWidth = '80px';
selected: string = '';
constructor() { }

private propagateChange = (_: any) => { };

//写值，设置控件的值form中setValue设置初始值，通过表单控件的writeValue方法设值。
writeValue(obj: any): void {
this.selected = obj;
}
//控件view发生变化，把变化emit给表单
registerOnChange(fn: any): void {
this.propagateChange = fn;
}
//什么状态算touched，告诉表单
registerOnTouched(fn: any): void {
}

onChange(i: number) {
this.selected = this.items;
this.propagateChange(this.selected); //变化通知表单
}

validate(c: FormControl): { : any } | null {
return this.selected ? null : {
 imageListInvalid: {
 valid: false
 }
}
}

}</pre>
</div>
View Code</div>
<h2>1，UI布局 </h2>
图片鼠标划过去如果没有任何反应，用户会无法感知到有没有选中，所以
<div class="cnblogs_code">
<pre> <div class="image-container" (click)="onChange(i)">
 <mat-icon class="avatar" ="avator"></mat-icon>
 <div class="after">
 <div class="zoom">
 <mat-icon>checked</mat-icon>
 </div>
 </div>
</div></pre>
</div>
让组件既处理icon又处理图片。用useSvgIcon控制，通过条件子句判断。
<div class="cnblogs_code">
<pre><mat-icon class="" ="selected" *ngIf="useSvgIcon else imgSelect"> </mat-icon>
<ng-template #imgSelect></ng-template></pre>
</div>
list太多支持滚动。包在.scroll-container容器中。
<div class="cnblogs_code">
<pre>.scroll-container {
overflow-y: scroll;
height: 200px;
}</pre>
</div>
<h2> 2，实现表单控件</h2>
可以通过 formContrlName来操作
 实现ControlValueAccessor接口。
<div class="cnblogs_code">
<pre>private propagateChange = (_: any) => { };

//写值，设置控件的值form中setValue设置初始值，通过表单控件的writeValue方法设值。
writeValue(obj: any): void {
this.selected = obj;
}
//控件view发生变化，把变化emit给表单
registerOnChange(fn: any): void {
this.propagateChange = fn;
}
//什么状态算touched，告诉表单
registerOnTouched(fn: any): void {
throw new Error('Method not implemented.');
}

onChange(i: number) {
this.selected = this.items;
this.propagateChange(this.selected); //变化通知表单
}</pre>
</div>
providers中定义自己的provider，把自己注册进去。
包括NG_VALUE_ACCESSOR和NG_VALIDATORS。
<div class="cnblogs_code">
<pre>providers: [
{
 provide: NG_VALUE_ACCESSOR,
 useExisting: forwardRef(() => ImageListSelectComponent),
 multi: true
},
{
 provide: NG_VALIDATORS,
 useExisting: forwardRef(() => ImageListSelectComponent),
 multi: true
}
]

validate(c: FormControl): { : any } | null {
return this.selected ? null : {
 imageListInvalid: {
 valid: false
 }
}
}</pre>
</div>
<h2> 3，调用/使用</h2>
在sharedModule中导出ImageListSelectComponent。
<div class="cnblogs_code">
<pre><app-image-list-select
 ="true"
 ="6"
 ="'选择头像:'"
 ="items"
 formControlName="avatar">
</app-image-list-select></pre>
</div>
<img src="https://img2020.cnblogs.com/blog/315302/202102/315302-20210219082652990-108187634.png" alt="" width="518" height="284" loading="lazy">
 
 
 
 
 
 
2019-04-07

</div>
<div id="MySignature" role="contentinfo">
如果觉得本文对您有帮助~可以支付宝(左)或微信支持一下：
 
看到小伙伴打赏时给我写一些鼓励的话，真的非常感动，谢谢你们。
 
我开了个微信公众号（第三个二维码）用来分享自己的职场英语相关学习经验，感兴趣可以关注，我会不断更新～ 
<div class="pay_img"><img style="display: none" class="alipay" src="http://files.cnblogs.com/files/starof/starof_zfb.bmp" alt="支付宝打赏"><img src="http://files.cnblogs.com/files/starof/starof_wx.bmp" alt="微信打赏"><img style="display: none" src="https://files.cnblogs.com/files/starof/starof_gzh.bmp" alt="微信公众号"></div> 
来源：https://www.cnblogs.com/starof/p/10666517.html

頁: [1]

琼殿技术论坛's Archiver

Angular响应式表单及封装表单控件