Angular 6:如何将calender/date选择器与表单集成?
Angular 6: How to Intergarte calender/date picker with form?
我有两个 div,一个包含日期选择器/日历,允许用户select他们想要的日期,第二个包含带有电子邮件、citym 和酒店的表单,
所以用户 select 一个日期并填写表格并通过点击预订提交。
这是我的
<div class="container about-booking-input">
<div class="row about-title">
<div class="col-md-7 about-title_bookingtitle">
<h2>Booking</h2>
</div>
</div>
<div class="row about-booking">
<div class="col-sm-4 offset-sm-2 about-booking_calendar">
<app-calendar></app-calendar>
</div>
<div class="col-sm-4 about-booking_form">
<flash-messages></flash-messages>
<form [formGroup]="angForm" class="form-element">
<div class="form-group form-element_email">
<input type="email" class="form-control info" placeholder="Email" formControlName="email" #email (ngModelChange)="onChange($event)">
</div>
<div *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)"
class="alert alert-danger">
<div *ngIf="angForm.controls['email'].errors.required">
Email is required.
</div>
</div>
<div class="input-group mb-3 form-element_city">
<select class="custom-select" id="inputGroupSelect01" #cityName>
<option selected *ngFor="let city of cities" [ngValue]="city.name">{{city.name}}</option>
</select>
</div>
<div class="input-group mb-3 form-element_hotel">
<select class="custom-select" id="inputGroupSelect01" #hotelName>
<option selected *ngFor="let hotel of hotels" [ngValue]="hotel.name">{{hotel.name}}</option>
</select>
</div>
<div class="form-group">
<button type="submit" (click)="addReview(email.value, cityName.value , hotelName.value)" class="btn btn-primary btn-block form-element_btn"
[disabled]="!validEmail">Book</button>
</div>
</form>
</div>
</div>
</div>
看样子是这样的。
现在我可以只提交没有日期的表格,谷歌搜索和谷歌搜索都没有找到任何帮助,
注意:我正在使用这个日期选择器 ui : ignite -ui angular https://www.infragistics.com/products/ignite-ui-angular/angular/components/calendar.html
Question
如何将我的日历与表单集成并能够提交?
您必须使 app-calender
组件成为自定义表单控件。一篇关于此的好文章:https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html
简而言之 shell,您的 AppCalenderComponent
必须实现 ControlValueAccessor
接口才能与 formGroup
通信。为 AppCalenderComponent
成功实施 ControlValueAccessor
后,您可以将其包含在如下表格中:
<form [formGroup]="form">
<app-calendar formControlName="nameOfTheDatePickerControl"></app-calendar>
</form>
我有两个 div,一个包含日期选择器/日历,允许用户select他们想要的日期,第二个包含带有电子邮件、citym 和酒店的表单,
所以用户 select 一个日期并填写表格并通过点击预订提交。
这是我的
<div class="container about-booking-input">
<div class="row about-title">
<div class="col-md-7 about-title_bookingtitle">
<h2>Booking</h2>
</div>
</div>
<div class="row about-booking">
<div class="col-sm-4 offset-sm-2 about-booking_calendar">
<app-calendar></app-calendar>
</div>
<div class="col-sm-4 about-booking_form">
<flash-messages></flash-messages>
<form [formGroup]="angForm" class="form-element">
<div class="form-group form-element_email">
<input type="email" class="form-control info" placeholder="Email" formControlName="email" #email (ngModelChange)="onChange($event)">
</div>
<div *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)"
class="alert alert-danger">
<div *ngIf="angForm.controls['email'].errors.required">
Email is required.
</div>
</div>
<div class="input-group mb-3 form-element_city">
<select class="custom-select" id="inputGroupSelect01" #cityName>
<option selected *ngFor="let city of cities" [ngValue]="city.name">{{city.name}}</option>
</select>
</div>
<div class="input-group mb-3 form-element_hotel">
<select class="custom-select" id="inputGroupSelect01" #hotelName>
<option selected *ngFor="let hotel of hotels" [ngValue]="hotel.name">{{hotel.name}}</option>
</select>
</div>
<div class="form-group">
<button type="submit" (click)="addReview(email.value, cityName.value , hotelName.value)" class="btn btn-primary btn-block form-element_btn"
[disabled]="!validEmail">Book</button>
</div>
</form>
</div>
</div>
</div>
看样子是这样的。
现在我可以只提交没有日期的表格,谷歌搜索和谷歌搜索都没有找到任何帮助,
注意:我正在使用这个日期选择器 ui : ignite -ui angular https://www.infragistics.com/products/ignite-ui-angular/angular/components/calendar.html
Question
如何将我的日历与表单集成并能够提交?
您必须使 app-calender
组件成为自定义表单控件。一篇关于此的好文章:https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html
简而言之 shell,您的 AppCalenderComponent
必须实现 ControlValueAccessor
接口才能与 formGroup
通信。为 AppCalenderComponent
成功实施 ControlValueAccessor
后,您可以将其包含在如下表格中:
<form [formGroup]="form">
<app-calendar formControlName="nameOfTheDatePickerControl"></app-calendar>
</form>