javascript - FormGroup 中的 Angular 2/4 FormControl 无法在带有标签的表单上显示

Question

我不明白该怎么做

1. 特定值的 console.log
2. 在 HTML 页面的标签中显示
3. 在输入文本中显示

这是我的组件打字稿，带有新的 FormGroup，然后是新的 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 -

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

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

Answer 1

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

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

或者

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

但是第一个肯定更好，因为'AOT'不会编译第二个。

但我会创建一个组件getter以使其更好：

 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>

Answer 2

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

"date"控件值的示例trackerForm.controls['date'].value。