如何解决事件更改值时 ControlValueAccessor ngModel 未更新
我有一个组件,它使用 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 {}
}
和吹线是我的密码。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
解决方法
您需要向自定义组件提供 NG_VALUE_ACCESSOR 令牌才能正常绑定工作
@Component({
selector: "app-password-input",templateUrl: "./password.component.html",styleUrls: ["./password.component.scss"],providers:[CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。