事件更改值时 ControlValueAccessor ngModel 未更新

Question

我有一个组件使用 controlvalueaccessor 绑定从父组件传递的 ngModel

password.component.ts:

     import {
  Component,
  ElementRef,
  forwardRef,
  HostListener,
  Input,
  OnChanges,
  OnInit,
  SimpleChanges
} from "@angular/core";
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => PasswordComponent),
  multi: true
};
@Component({
  selector: "app-password-input",
  templateUrl: "./password.component.html",
  styleUrls: ["./password.component.scss"]
})
export class PasswordComponent
  implements OnInit, ControlValueAccessor, OnChanges {
  _model: string;
  @Input() depended: string = "";
  @Input() name: string = "password";
  @Input() id: string = "password";
  @Input() class: string = "form-control";
  @Input() placeholder: string = "";
  @Input() required:boolean;

  setPassword(event) {
    this.writeValue(event);
  }

  changeModel() {
    this.model = "aaaa";
  }
 change(event){
    console.log("event",event);
    
  }
  constructor() {}
  ngOnChanges(changes: SimpleChanges): void {}
  ngOnInit(): void {}

  get model() {
    return this._model;
  }

  set model(val) {
    this._model = val;
    this.propagateChange(this._model);
  }

  writeValue(value: any) {
    if (value !== undefined) {
      this.model = value;
    }
  }

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

  registerOnChange(fn: any): void {
    this.propagateChange = fn;
  }

  registerOnTouched(fn: any): void {}

  setDisabledState?(isDisabled: boolean): void {}
}

打击线是我的 password.component.html:

<div>
  <label for="password"
    >pass
    <small class="text-danger">*</small>
  </label>
  <div class="input-group mb-2">
    <input
      [class]="class"
      [id]="id"
      name="name"
      [(ngModel)]="model"
      #models="ngModel"
      (ngModelChange)="change($event)"
      [required]="required"
      [placeholder]="placeholder"
    />
    <div class="input-group-prepend">
      <button class="btn  rounded-0" (click)="changeModel()" type="button">
        change
      </button>
    </div>
  </div>
  in child component: {{model}}
</div>

下面是我的父组件：

<app-password-input [(ngModel)]='password' name="password" ngDefaultControl></app-password-input>
out:
{{password}}

我的问题是，当我使用触发 changeModel 的按钮更改输入时，密码组件中的模型正在更新，但值不影响父组件中的 model.password

stack blitz link

Answer 1

您需要向自定义组件提供 NG_VALUE_ACCESSOR 令牌才能正常绑定工作

@Component({
  selector: "app-password-input",
  templateUrl: "./password.component.html",
  styleUrls: ["./password.component.scss"],
  providers:[CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})

Forked Working Example

事件更改值时 ControlValueAccessor ngModel 未更新

ControlValueAccessor ngModel not updated when event changed value

angular-ngmodel

ngmodel

angular

controlvalueaccessor