Angular - controlValueAccessor 方法 writeValue() 未被调用

Question

角度版本：6.1

我正在尝试使用Kara Erickson 所称的 Composite ControlValueAccessor 来实现自定义控件，如演示文稿Angular Forms – Kara Erickson – AngularConnect 2017 中所示。控件的值应设置为两个子输入值之一。

这个问题writeValue()似乎只在最初被调用，而不是在进一步的价值变化上。

这是一个stackblitz 演示。

表单.html

<form #f="ngForm" (ngSubmit)="f.form.valid && Submit(f)">
    <confirm-password name='password' ngModel #pwd='ngModel'></confirm-password>
    <div>{{pwd.status}}</div>
</form>

确认密码.html

<div [formGroup]='pass'>
  <label>Password:
    <input type="password" formControlName='pwd1' (blur)='onTouched()'>
  </label>
  <div *ngIf="controlDir.touched && controlDir.control.errors?.required" 
         class="error">Password is required.</div>

  <label>Please re-enter password:
    <input type="password" formControlName='pwd2' (blur)='onTouched()'>
  </label>
  <div class='error' *ngIf='controlDir.touched && controlDir.control.errors?.notEqual && 
                            !controlDir.errors?.required'>Passwords do not match.</div>
</div>

确认-password.ts

import { Component, Self, OnInit, OnDestroy } from '@angular/core';
import { ControlValueAccessor, AbstractControl, NgControl,
         ValidatorFn, Validators, FormGroup, FormControl } from '@angular/forms';
import { Subscription } from 'rxjs';

@Component({
  selector: 'confirm-password',
  templateUrl: './confirm-password.component.html',
  styleUrls: ['./confirm-password.component.css']
})
export class ConfirmPasswordComponent implements ControlValueAccessor, OnInit, OnDestroy
{
  password: string; // the value of the control should be set to this value
  pass = new FormGroup({
    pwd1: new FormControl(),
    pwd2: new FormControl()
  });
  private onChange: (value: string) => void;
  private onTouched: (value: string) => void;
  private valueChanges: Subscription;

  constructor(@Self() public controlDir: NgControl)
  {
    controlDir.valueAccessor = this;
  }

  ngOnInit()
  {
    const control = this.controlDir.control;

    let myValidators = [
            Validators.required, 
            equalValidator(this.pass.controls.pwd1,
                           this.pass.controls.pwd2)
        ]
    // ovoid overwriting any existing validators
    let validators = control.validator
      ? [control.validator, ...myValidators]
      : [...myValidators];
    control.setValidators(validators);
    control.updateValueAndValidity();
  }

  writeValue(val: any)
  {
    /* whether everything inside of this method is commented out or not 
       doesn't seem to affect anything */
    console.log(val);
    //val && this.pass.setValue(val, {emitEvent: false});
    this.password = val;
  }

  registerOnChange(fn: (val: any) => void)
  {
    this.valueChanges = this.pass.valueChanges.subscribe(fn);
  }

  registerOnTouched(fn: () => void)
  {
    this.onTouched = fn;
  }

  setDisabledState(disabled: boolean)
  {
    disabled ? this.pass.disable() : this.pass.enable();
  }

  ngOnDestroy()
  {
    this.valueChanges.unsubscribe();
  }

}

export function equalValidator(el1, el2): ValidatorFn
{
  return (ctrl: AbstractControl): {[key: string]: any} | null => {
    const notEqual = el1.value !== el2.value;

    return notEqual ?  {"notEqual": true} : null;
  };
}

Answer 1

的目的writeValue是通知您的组件有关外部/父组件上的表单控件的更改。您通常想要用它做的是将来自外部的更改绑定到局部变量。

为了将组件内部的变化通知给外部世界，您需要调用该onChange方法。您可以调用它，就像通常调用事件发射器一样。

我在这里整理了几个例子：https : //www.tsmean.com/articles/angular/angular-control-value-accessor-example/

Answer 2

writeValue 当您不是通过用户输入更改控制值（例如，通过设置支持 ngModel 属性或控制值）时调用。

https://stackblitz.com/edit/angular-hu2bfs?file=src/app/app.module.ts

我已经删除了误用造成的错误 ngModel

如您所见，如果您输入额外的输入新值并按下按钮，writeValue则会调用。

包装它 -writeValue在控制器更改模型值时调用，writeValue目的是执行所需的操作以通过自定义控件反映模型更改。