Angular 2/4 FormControl in FormGroup not able to display on form with label

1
votes

I am not understanding how to do

  1. console.log of a specific value
  2. display in a label on HTML page
  3. display in an input text

Here is my Component Typescript with new FormGroup and then the new FormControls

    this.trackerForm = new FormGroup({
        session: new FormControl('', Validators.required),
        date: new FormControl(new Date(), [
            Validators.required
        ]),
        contactType: new FormControl('', [
            Validators.required
        ]),
        customerType: new FormControl('', Validators.required),
        firstName: new FormControl('', [Validators.required, Validators.minLength(80)]),
        lastName: new FormControl('', [Validators.required, Validators.minLength(80)]),
        phone: new FormControl('', [Validators.required, Validators.maxLength(10), Validators.minLength(10)]),
        extension: new FormControl('', [Validators.maxLength(7)])

    });

    // this outputs the entire json
    console.log(JSON.stringify(this.trackerForm.value));
    //How do I ONLY console.log  one of the values?   date?

HTML on page - 

<form [formGroup]="trackerForm" (ngSubmit)="onSubmit(trackerForm.value)" novalidate>

 <div>
      <label class="form-control"><span>{{trackerForm.date.value}}  </span></label>
    </div>
2
javascriptangularangular-reactive-formsangular-forms
<label class="form-control"><span>{{trackerForm.value.date | date:'short'}} </span></label> – Rajez
I don't really understand what you want to do. But if you want to display the value of a single field you can do console.log(this.trackerForm.get('fieldName').value); – Antoine Clavijo
And in a html page it's the same {{trackerForm.get('fieldName').value}} – Antoine Clavijo

2 Answers

6
votes
<form [formGroup]="trackerForm" (ngSubmit)="onSubmit(trackerForm.value)" novalidate>

 <div>
      <label class="form-control"><span>{{trackerForm.get('date').value}}  </span></label>
    </div>

or 

<label class="form-control"><span>{{trackerForm.controls['date'].value}}  </span></label>

but the first one the definitely better because 'AOT' doesn't compile the second one.

but I would create a component getter to make it nicer : 

 get dateControl(){
     return this.trackerForm.get('date');
 }

and then :

    <form [formGroup]="trackerForm" (ngSubmit)="onSubmit(trackerForm.value)" novalidate>

 <div>
      <label class="form-control"><span>{{dateControl.value}}  </span></label>
    </div>
0
votes

You need to access formGroup controls via trackerForm.controls object.

Example for "date" control's value trackerForm.controls['date'].value.