Javascript FormGroup中的Angular 2/4 FormControl无法在带有标签的窗体上显示

Javascript FormGroup中的Angular 2/4 FormControl无法在带有标签的窗体上显示,javascript,angular,angular-reactive-forms,angular-forms,Javascript,Angular,Angular Reactive Forms,Angular Forms,我不知道该怎么做 特定值的console.log 在HTML页面上的标签中显示 在输入文本中显示 这是我的带有新FormGroup和新FormControls的组件Typescript this.trackerForm = new FormGroup({ session: new FormControl('', Validators.required), date: new FormControl(new Date(), [ Val

我不知道该怎么做

特定值的console.log 在HTML页面上的标签中显示 在输入文本中显示 这是我的带有新FormGroup和新FormControls的组件Typescript

    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-

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

 <div>
      <label class="form-control"><span>{{trackerForm.date.value}}  </span></label>
    </div>
您需要通过TrackPerform.controls对象访问formGroup控件

日期控件的值TrackPerform.controls['date'].value的示例。

您需要通过TrackPerform.controls对象访问formGroup控件

日期控件的值TrackPerform.controls['date'].value的示例

然后:

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

 <div>
      <label class="form-control"><span>{{dateControl.value}}  </span></label>
    </div>
然后:

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

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

{{trackperform.value.date | date:'short'}我真的不明白你想做什么。但是,如果您想显示单个字段的值,可以执行console.logthis.trackPerform.get'fieldName'。value;在html页面中也是一样的{{trackperform.get'fieldName'.value}{{trackperform.value.date | date:'short'}我真的不明白你想做什么。但是,如果您想显示单个字段的值,可以执行console.logthis.trackPerform.get'fieldName'。value;在html页面中,{{trackperform.get'fieldName'.value}}与mat卡标题同样适用。非常感谢。{{formattedUsers.get'name'。value}}也适用于mat卡标题。非常感谢。{{formattedUsers.get'name'。value}
 get dateControl(){
     return this.trackerForm.get('date');
 }
    <form [formGroup]="trackerForm" (ngSubmit)="onSubmit(trackerForm.value)" novalidate>

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