首页 文章

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

提问于
浏览 次
1

我不明白该怎么做

  • console.log具体值

  • 显示在HTML页面上的标签中

  • 在输入文本中显示

这是我的Component Typescript与新的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>
javascript angular angular-reactive-forms angular-forms

2 回答

  • 5
    <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>
    回复于
  • 0

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

    "date" control的值 trackerForm.controls['date'].value 的示例 .

    回复于

相关问题