Angular封装表单控件及思想总结

interface ControlValueAccessor {
 writeValue(obj: any): void
 registerOnChange(fn: any): void
 registerOnTouched(fn: any): void
 setDisabledState(isDisabled: boolean)"htmlcode">

export class MyInputComponent implements OnInit, ControlValueAccessor {
 value: string | number;
 @Input() disabled: boolean;
 @Input() placeholder: string;
 @Input() type = 'text';
 constructor() { }

 ngOnInit() {
 }
 writeValue(data: any) {
 this.value = data;
 }
 registerOnChange(fn: any) {

 }
 registerOnTouched(fn: any) {

 }
 setDisabledState(disabled: boolean) {
 this.disabled = disabled;
 }

}


其实封装工作只完成一半，组件装饰器元数据完整：


@Component({
 // tslint:disable-next-line: component-selector
 selector: 'my-input',
 templateUrl: './my-input.component.html',
 styleUrls: ['./my-input.component.scss'],
 providers: [{
 provide: NG_VALUE_ACCESSOR,
 useExisting: forwardRef(() => MyInputComponent),
 multi: true
 }]
})


至此，控件在form表单中使用不会报错；表单内放置一个查询按钮，用来输出表单状态：


<form nz-form [formGroup]="form" (ngSubmit)="submit(form)">
 <div nz-row nzFlex [nzGutter]="8">
 <div nz-col [nzSpan]="6">
 <nz-form-item>
 <nz-form-label [nzSpan]="10">userName</nz-form-label>
 <nz-form-control [nzSpan]="14">
  <my-input formControlName="userName"></my-input>
 </nz-form-control>
 </nz-form-item>
 </div>
 </div>
 <button nz-button type="submit" [nzType]="'primary'">查询</button>
</form>




ngOnInit() {
 this.form = this.fb.group({
 userName: [2]
 });
 }
 submit(form: FormGroup) {
 console.log(form);
 }


封装控件内部：


<div class="my-input">
 <input type="{{type}}" value="{{value}}" placeholder="{{placeholder}}">
</div>


通过formControlName的绑定方式将userName传入控件，控件通过writeValue方法接收并赋值到自身属性value，用于与原生input交互，此时我们手动输入内容为数字3，然后打印：



可以看到表单没有获取到最新的值，这是因为目前位置表单获取组件的value还是初始值，我们也没有提供改变value的方法机制，修改html：


<div class="my-input">
 <input type="{{type}}" [ngModel]="actualValue" placeholder="{{placeholder}}" (ngModelChange)="modelChange($event)">
</div>


这里稍微解释input绑定数据与触发的更新方法可以选择原生的value和input进行更新，也可以选择ng提供的ngModel和ngModelChange事件更新控件，区别在于使用原生input的输入事件，要使用到事件对象展开找到元素的value属性值；而使用ng官方框架自带的事件，事件对象$event就是最新的value值。
新增set value方法：


set value(data) {
 this.actualValue = data;
 // 通知表单value更新
 this.onChange(data);
}
registerOnChange(fn: any) {
 // 注册表单的value改变通知方法
 this.onChange = fn;
}
modelChange(event) {
 this.value = event;
}


输入 3 ，查询打印：



实现原生input基础属性


这个几乎是一条默认的规则，封装的控件至少实现原生input的基础属性功能，在此基础上再进行满足业务需求。

  
type
  
maxlength
  
minlength
  
placeholder
  
......

这里只讨论type为text和number的情况，radio等其它类型没必要深入。
我们不能直接使用maxlength进行与input绑定，至少写法不是很好,比较妥善的做法是动态的判断长度值，并且将正确的值设置到原生input属性中。
为此修改html：


<div class="my-input">
 <input
 type="{{type}}"
 #inputElement
 [(ngModel)]="actualValue"
 placeholder="{{placeholder}}"
 (ngModelChange)="modelChange($event)"
 >
</div>


注入 Renderer2，用于对原生元素操作


ngOnChanges(changes: SimpleChanges) {
 this.initAttributes(changes);
 }
initAttributes(changes: SimpleChanges) {
 for (const key in changes) {
  if (changes.hasOwnProperty(key)) {
  const element = changes[key];
  if (element) {
   this.render2.setProperty(this.inputElement.nativeElement, key, element.currentValue);
  }
  }
 }
 }


Validator




ngOnInit() {
 this.form = this.fb.group({
  userName: [2, [Validators.required, Validators.minLength(3)]]
 });
 }


经过打印测试，表单的状态正确 √
适当使用指令


假如此时需要对输入内容拦截处理，目前在不写input事件的情况下无法做到，假如针对一个type=number类型的输入框，设置最大值，超过这个值不会改变,原生input元素确实有max属性支撑验证，但是它无法改变value值，也就是说假如这个最大值不是必要验证属性，那么表单还是可以提交最新的超出值，用指令可以拦截处理。


import { Directive, ElementRef, HostListener, Renderer2, Input } from '@angular/core';

@Directive({
 selector: '[appInput]',
})
export class InputDirective {
 constructor(
 private el: ElementRef,
 private render: Renderer2
 ) {
 // 添加预设class
 render.addClass(this.el.nativeElement, 'my-input');
 }
 @HostListener('input') onInputChange() {
 const element = this.el.nativeElement;
 if (element.max && Number(element.value) >= Number(element.max)) {
  this.render.setProperty(element, 'value', element.max);
 }
 }
}




<div class="my-input">
 <input
 appInput
 #inputElement
 [(ngModel)]="actualValue"
 placeholder="{{placeholder}}"
 (ngModelChange)="modelChange($event)"
 >
</div>




<my-input formControlName="userName" [maxLength]="5" [type]="'number'" [max]="250"></my-input>


表单验证测试：



form表单拿到的值还是输入的非法值，这是因为模型值与原生元素之间没有真正的做到统一一致，
指令中核心代码修改：


@Output() valueChange = new EventEmitter();
@HostListener('input') onInputChange() {
 const element = this.el.nativeElement;
 if (element.max && Number(element.value) >= Number(element.max)) {
  this.render.setProperty(element, 'value', element.max);
  this.valueChange.emit(element.value);
 }
}


在input 标签上添加事件监听 (valueChange)="onValueChange($event)"


onValueChange(event) {
 this.modelChange(event);
 }


 
表单获取的值与原生控件的value一致，一般自行封装原生控件还需要加入自己的样式，甚至有时候我们封装的主要目的就是美化样式，动态添加class示例：


@Directive({
 selector: '[appInput]',
 // tslint:disable-next-line: no-host-metadata-property
 host: {
 '[class.my-input-disabled]': 'disabled'
 }
})
export class InputDirective {
 constructor(
 private el: ElementRef,
 private render: Renderer2
 ) {
 // 添加预设class
 render.addClass(this.el.nativeElement, 'my-input');
 }
 @Input() @InputBoolean() disabled = false;
 @Output() valueChange = new EventEmitter();
 @HostListener('input') onInputChange() {
 const element = this.el.nativeElement;
 if (element.max && Number(element.value) >= Number(element.max)) {
  this.render.setProperty(element, 'value', element.max);
  this.valueChange.emit(element.value);
 }
 console.log(element.value);
 }
}


结尾：总结下封装表单控件的原则：
1.原生控件支持的属性机制理论上需要全部保留实现（特别针对某业务封装除外）；
2.不涉及复杂的数据处理、判断等逻辑的优先使用指令处理，例如本例中input的大多数功能都可以不做封装，原生标签input已经很完善；
3.get和set方法必须体现，且要保持模型数据与原生元素的value一致，外部操作可以更改组件属性，是否需要监听属性变化作出相应处理根据空间类型和业务进行斟酌；
4.一定要使用form表单提交功能去验证，原生form 配合name和label
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。