사용자 정의 양식 컨트롤을 구현하기 위해 Angular의 ControlValueAccessor 사용에 대한 자세한 설명

이 글에서는 Angular ControlValueAccessor를 사용하여 사용자 정의 양식 컨트롤을 구현하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Angular: [ControlValueAccessor] 사용자 정의 양식 제어

---

실제 개발에서는 일반적으로 다양한 사용자 정의 기능을 접하게 되며 일부 구성 요소는 Angular의 양식과 상호 작용합니다. 이때 일반적으로 FormGroup 객체를 전달합니다. 그런 다음 해당 로직을 구성 요소 내부에 작성하여 Angular 형식을 작동합니다. 양식에서 하나의 항목만 사용자 정의하는 경우 전체 양식 개체를 전달하는 것은 명백히 부적절하며 구성 요소도 부풀어오르게 나타납니다.

<form [formGroup]="simpleForm">                                <br/>  <other-component [form]="simpleForm"></other-component>        <br/></form><br/>

그렇다면 이러한 사용자 정의 구성 요소를 기본 형식처럼 사용할 수 있습니까? 현재 오픈 소스 구성 요소인 ng-zorro-antd 양식 구성 요소는 기본 양식과 마찬가지로 formControlName 속성을 사용할 수 있습니다. 이러한 유형의 구성 요소를 사용자 정의 양식 구성 요소라고 합니다. [관련 권장 사항: "angular Tutorial"]

사용자 정의 양식 컨트롤을 구현하는 방법

Angular에서는 ControlValueAccessor를 사용하여 구성 요소를 외부 래핑된 양식과 연결할 수 있습니다.

ControlValueAccessor는 다음을 처리하기 위한 인터페이스입니다.

• 양식 모델에서 뷰/DOM으로 값 쓰기
• 뷰/DOM이 변경될 때 다른 양식 지시어 및 컨트롤에 알림

ControlValueAccessor Four

ControlValueAccessor 인터페이스 메소드 정의:

writeValue(obj: any): void<br/><br/>registerOnChange(fn: any): void<br/><br/>registerOnTouched(fn: any): void<br/><br/>setDisabledState(isDisabled: boolean)?: void<br/>

writeValue(obj: any): 양식 모델의 새 값을 뷰 또는 DOM 속성(필요한 경우)에 쓰는 메소드, 외부에서 데이터를 씁니다. 내부 데이터 모델에 데이터 흐름 방향: 양식 모델 -> writeValue(obj：any)：将表单模型中的新值写入视图或DOM属性（如果需要）的方法，它将来自外部的数据写入到内部的数据模型。数据流向： form model -> component。

registerOnChange(fn：any)：一种注册处理程序的方法，当视图中的某些内容发生更改时应调用该处理程序。它具有一个告诉其他表单指令和表单控件以更新其值的函数。通常在 registerOnChange 中需要保存该事件触发函数，在数据改变的时候，可以通过调用事件触发函数通知外部数据变了，同时可以将修改后的数据作为参数传递出去。数据流向： component -> form model。

registerOnTouched(fn: any)：注册 onTouched 事件，基本同 registerOnChange ，只是该函数用于通知表单组件已经处于 touched 状态，改变绑定的 FormControl 的内部状态。状态变更： component -> form model。

setDisabledState(isDisabled: boolean)：当调用 FormControl 变更状态的 API 时得表单状态变为 Disabled 时调用 setDisabledState() 方法，以通知自定义表单组件当前表单的读写状态。状态变更： form model -> component。

如何使用 ControlValueAccessor

搭建控件框架

@Component({<br/>  selector: &#39;app-test-control-value-accessor&#39;,<br/>  templateUrl: &#39;./test-control-value-accessor.component.html&#39;,<br/>  providers: [{<br/>    provide: NG_VALUE_ACCESSOR,<br/>    useExisting: forwardRef(() => TestControlValueAccessorComponent),<br/>    multi: true<br/>  }]<br/>})<br/>export class TestControlValueAccessorComponent implements ControlValueAccessor {<br/><br/>  _counterValue = 0;<br/> <br/>  private onChange = (_: any) => {};<br/><br/>  constructor() { }<br/><br/>  get counterValue() {<br/>    return this._counterValue;<br/>  }<br/><br/>  set counterValue(value) {<br/>    this._counterValue = value;<br/>    // 触发 onChange，component 内部的值同步到 form model<br/>    this.onChange(this._counterValue);<br/>  }<br/><br/>  increment() {<br/>    this.counterValue++;<br/>  }<br/><br/>  decrement() {<br/>    this.counterValue--;<br/>  }<br/><br/>  // form model 的值同步到 component 内部<br/>  writeValue(obj: any): void {<br/>    if (obj !== undefined) {<br/>      this.counterValue = obj;<br/>    }<br/>  }<br/><br/>  registerOnChange(fn: any): void {<br/>    this.onChange = fn;<br/>  }<br/><br/>  registerOnTouched(fn: any): void { }<br/><br/>  setDisabledState?(isDisabled: boolean): void { }<br/><br/>}<br/>

注册 ControlValueAccessor

为了获得 ControlValueAccessor 用于表单控件，Angular 内部将注入在 NG_VALUE_ACCESSOR 令牌上注册的所有值，这是将控件本身注册到 DI 框架成为一个可以让表单访问其值的控件。因此，我们需要做的就是NG_VALUE_ACCESSOR 使用我们自己的值访问器实例（这是我们的组件）扩展 multi-provider 。所以设置 multi: true，是声明这个 token 对应的类很多，分散在各处。

这里我们必须使用 useExisting，因为TestControlValueAccessorComponent 可能在使用它的组件中被其创建为指令依赖项。这就得用到 forwardRef

registerOnChange(fn: any): 뷰의 내용이 변경될 때 호출되어야 하는 핸들러를 등록하는 메서드입니다. 다른 양식 지시문과 양식 컨트롤에 해당 값을 업데이트하도록 지시하는 기능이 있습니다. 일반적으로 이벤트 트리거 함수는 RegisterOnChange에 저장되어 있어야 하며, 데이터가 변경되면 이벤트 트리거 함수를 호출하여 외부 데이터에 변경 사항을 알릴 수 있으며, 수정된 데이터를 매개변수로 전달할 수 있습니다. 데이터 흐름 방향: 구성 요소 ->

registerOnTouched(fn: any): onTouched 이벤트를 등록합니다. 기본적으로 RegisterOnChange와 동일합니다. 단, 이 함수는 양식 구성 요소에 터치 상태임을 알리고 내부 상태를 변경하는 데 사용됩니다. 바인딩된 FormControl. 상태 변경: 컴포넌트 ->

setDisabledState(isDisabled: boolean): 상태를 변경하기 위해 FormControl의 API를 호출할 때 양식 상태가 비활성화됨으로 변경되면 setDisabledState() 메서드가 호출되어 사용자 정의 양식 구성 요소에 읽기 내용을 알립니다. 현재 양식의 상태를 작성합니다. 상태 변경: 양식 모델 ->

ControlValueAccessor를 사용하는 방법

컨트롤 프레임워크를 구축하는 방법

• @Component({<br/>  ...<br/>  providers: [<br/>    { <br/>      provide: NG_VALUE_ACCESSOR,<br/>      useExisting: forwardRef(() => TestControlValueAccessorComponent ),<br/>      multi: true<br/>    }<br/>  ]<br/>})<br/>export class TestControlValueAccessorComponent implements ControlValueAccessor {<br/>  ...<br/>}<br/>

ControlValueAccessor 등록

양식 컨트롤을 위한 ControlValueAccessor를 얻기 위해 Angular는 이를 내부적으로 삽입합니다. NG_VALUE_ACCESSOR 토큰에 등록된 모든 값은 컨트롤 자체를 <code>DI 프레임워크에 등록하여 양식에서 해당 값에 액세스할 수 있는 컨트롤이 됩니다. 따라서 우리가 해야 할 일은 자체 값 접근자 인스턴스(구성 요소)를 사용하여 다중 공급자를 확장하는 것뿐입니다. 따라서 multi: true를 설정하는 것은 이 토큰에 해당하는 클래스가 여러 곳에 분산되어 있음을 선언하는 것입니다.

여기서 useExisting을 사용해야 합니다. 왜냐하면 TestControlValueAccessorComponent가 이를 사용하는 구성 요소에서 지시문 종속성으로 생성될 수 있기 때문입니다. 이를 위해서는 정의되지 않은 객체를 참조할 수 있게 해주는 forwardRef를 사용해야 합니다.

<div class="panel panel-primary"><br/>  <div class="panel-heading">自定义控件</div><br/>  <div class="panel-body"><br/>    <button (click)="increment()">+</button><br/>    {{counterValue}}<br/>    <button (click)="decrement()">-</button><br/>  </div><br/></div><br/>

제어 인터페이스

• test-control-value-accessor.comComponent.html

<div class="constainer"><br/>  <form #form="ngForm"><br/>    <app-test-control-value-accessor name="message" [(ngModel)]="message"></app-test-control-value-accessor><br/>    <button type="button" (click)="submit(form.value)">Submit</button><br/>  </form><br/>  <pre class="brush:php;toolbar:false">{{ message }}