I have a 'control value accessor' class from here http://blog.rangle.io/angular-2-ngmodel-and-custom-form-components/
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);
}
}
I extend that class in a component:
export class PricingComponent extends ValueAccessorBase<any> implements OnInit {
constructor() {
super(); // value accessor base
}
}
Inside PricingComponent
template using ngModelGroup
to group multiple input form controls into an object:
<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>
And PricingComponent
is used like this:
<form #form="ngForm">
<app-pricing name="prices" ngModel></app-pricing>
{{form.value | json}}
</form>
Now, what I would like to get from the form.value
is something like:
{ prices: { type: 'high', amount: 542 } }
But I'm getting this error:
No provider for ControlContainer