Question

编辑：重新说明以澄清。

在我的应用程序中，我正在使用从后端获取的JSON动态构建表单。

当JSON有一个＆＃34;密码＆＃34;字段我想 - 而不是显示单个密码输入字段 - 显示2个字段：一个用于密码，一个用于密码确认。

为此，我创建了一个实现ControlValueAccessor的自定义组件。

我的目标是根据自定义组件设置原始密码控件的错误状态（和值）。

我尝试了什么： 我有一个ControlValueAccessor的工作实现，它成功地反映了对原始控件的更改，即：

<form [formGroup]="form">
    <custom-input-working [formControlName]="atext"></custom-input-working>
</form>

其中form和atext的定义如下：

this.form = this.fb.group({"atext": ['', Validators.required]})

和custom-input-working定义为：

export abstract class AbstractValueAccessor implements ControlValueAccessor {
    protected control = new FormControl();

    writeValue(obj: any): void {
        if(obj != undefined && obj != null) {
            this.control.setValue(obj);
        }
    }

    registerOnChange(fn: any): void {
        this.control.valueChanges.subscribe(fn);
    }

    registerOnTouched(fn: any): void {
    }

}

但是当我尝试用一些更复杂的结构（即：2个字段）替换模板时，功能会中断。

<form [formGroup]="form">
    <custom-password [formControlName]="password"></custom-password>
</form>

this.form = this.fb.group({password: ['', Validators.required]})



@Component({
selector: 'custom-password',
template: `<form [formGroup]="form">
             <input type="password" formControlName="passwordInput">
             <input type="password" formControlName="passwordConfirm">
           <form>`
providers: [/*The NG_VALUE_ACCESSOR thing */]
})
export class PasswordComponent implements ControlValueAccessor {
/* ... */

control:FormControl = new FormControl();

constructor(/*...*/){
    this.form.get("passwords").valueChanges.subsscribe(x => {
        this.writeValue(x.passwordInput); // <---- this writeValue() [line 56 in plunkr] is where I expect the origin control to be updated, as happens in the working example. Obviously I'm wrong here.
        if(x.passwordInput !== x.confirmPassword){
            this.control.setErrors({"passwordConfirm": true}); // <--- again, this probably doesn't set the error on origin control [line 58]
        }
    })
}
}

原始控件（＆＃34;密码＆＃34;）没有得到＆＃34; passwordInput＆＃34;价值，也没有得到错误。

我也尝试过： 直接绑定到＆＃34;控制＆＃34;：

<input type="password" [formControl]="control">

这是我的plnkr：http://plnkr.co/edit/VAVg0TmlHbIbXM4bzJzD?p=preview

在底部 - 工作解决方案。在顶部 - 我失败的地方。

我在这里做错了什么？谢谢！

ControlValueAccessor不更新原始控件

0 个答案: