Angular2 and the value of formControlName in the template

Question

Oh angular2 ... why so complicated?

<input type="text" formControlName="exposure" type="hidden"> <label>{{exposure}}</label> 

If I use formControlName in the input, this value is true.

How to get exposure value in a template? Its space in the label

Answer 1

The formControlName directive formControlName intended for use with the parent FormGroupDirective (selector: [formGroup] ).

It takes the string name of the FormControl instance that you want the link to and will look for the FormControl registered with that name in the nearest FormGroup or FormArray above it.

Use form.get('exposure').value to get a control value.

Example:

 <form [formGroup]="form"> <input type="text" formControlName="exposure" type="hidden"> <label>{{ form.get('exposure').value }}</label> </form> 

As an alternative

In your component class, define a getter property that represents your form control:

 export class MyComponent { form = new FormGroup({ exposure: new FormControl('') }); get exposure(): FormControl { return this.form.get('exposure'); } 

Then, in the component template, you can reference exposure :

 <input type="text" formControlName="exposure" type="hidden"> <label>{{exposure.value}}</label>