窗体中的Angular 2自定义控件，默认值为[object Object]

Question

I've a simple angular2 reactive form:

formangular.component.html

 <form novalidate (ngSubmit)="onSubmit(formDir.value)" [formGroup]="complexForm" #formDir="ngForm"> <div class="form-group"> <custom-input id="idCausaleRitenuta" class="form-control" label="Codice:" formControlName="idCausaleRitenuta" [(ngModel)]="idCausaleRitenuta"></custom-input> <div *ngIf="idCausaleRitenuta.invalid && (idCausaleRitenuta.dirty || idCausaleRitenuta.touched)" class="alert alert-danger"> ........ 

the relative .ts file:

formangular.component.ts

 export class FormAngularComponent { get idCausaleRitenuta() { return this.complexForm.get('idCausaleRitenuta');} constructor(private fb: FormBuilder, private ritenuteService: RitenuteService, private sharedService: SharedService) { this.createForm();} createForm() { this.complexForm = this.fb.group({ idCausaleRitenuta: ['', Validators.compose([Validators.required, Validators.maxLength(4)])], ........ 

...And the custom-input control:

custominput.component.ts

 ................. @Component({ selector: 'custom-input', template: `<div> <label *ngIf="label" [attr.for]="identifier">{{label}}</label> <input [id]="identifier" [type]="type" [class]="class" [placeholder]="placeholder" [(ngModel)]="value" (blur)="touch()" /> </div>`, ....... }) export class CustomInputComponent<T> implements ControlValueAccessor { ......... identifier = `custom-input-${identifier++}`; 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); } } let identifier = 0; 

When I render the form, the value of the input inside the 'custom control' is '[object Object]', can someone tell me why?

Answer 1

When you make this call:

get idCausaleRitenuta() { return this.complexForm.get('idCausaleRitenuta');}

You are actually getting the FormControl object (not the value of the form control).

You can access the value property of that control like this:

get idCausaleRitenuta() { return this.complexForm.get('idCausaleRitenuta').value;}