Javascript FormGroup中的Angular 2/4 FormControl无法在带有标签的窗体上显示
我不知道该怎么做 特定值的console.log 在HTML页面上的标签中显示 在输入文本中显示 这是我的带有新FormGroup和新FormControls的组件TypescriptJavascript 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
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>