我有一个“控制值访问”类从这里“控制值访问” http://blog.rangle.io/angular-2-ngmodel-and-custom-form-components/角2:嵌套元素
export class ValueAccessorBase<T> implements ControlValueAccessor {
private innerValue: T;
private changed = new Array<(value: T) => void>();
private touched = new Array<() => void>();
get value(): T {
return this.innerValue;
}
set value(value: T) {
if (this.innerValue !== value) {
this.innerValue = value;
this.changed.forEach((f) => f(value));
}
}
touch() {
this.touched.forEach((f) => f());
}
writeValue(value: T) {
this.innerValue = value;
}
registerOnChange(fn: (value: T) => void) {
this.changed.push(fn);
}
registerOnTouched(fn:() => void) {
this.touched.push(fn);
}
}
我延伸在一个组件,类:
export class PricingComponent extends ValueAccessorBase<any> implements OnInit {
constructor() {
super(); // value accessor base
}
}
内部PricingComponent
使用ngModelGroup
的模板将多个输入表单控件分组到一个对象中:
<div ngModelGroup="value">
<md-select [(ngModel)]="value.type" name="type">
<md-option *ngFor="let c of list" [value]="c.code">{{c.dsc}}</md-option>
</md-select>
<md-input-container>
<input [(ngModel)]="value.amount" name="amount" mdInput>
</md-input-container>
</div>
而且PricingComponent
这样使用:
<form #form="ngForm">
<app-pricing name="prices" ngModel></app-pricing>
{{form.value | json}}
</form>
现在,我想从form.value
得到的是这样的:
{ prices: { type: 'high', amount: 542 } }
但我发现了这个错误:
No provider for ControlContainer
这工作简单。我还实施了它来解决与此问题无关的另一个问题:https://github.com/angular/angular/issues/9600#issuecomment-339298977 –