Angular 6: Как интегрировать календарь/выбор даты с формой?

У меня есть два div, один из которых содержит средство выбора даты/календарь, которые позволяют пользователю выбирать желаемую дату, а второй содержит форму с электронной почтой, городом и отелем,

поэтому пользователь выбирает дату, заполняет форму и отправляет ее, щелкая книгу.

Вот что у меня есть

<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>

Visul выглядит похоже на это. введите здесь описание изображения

Прямо сейчас я могу отправить только форму без даты, после того, как гугление и гугление не нашли ничего полезного,

Примечание. Я использую этот пользовательский интерфейс средства выбора даты: ignite -ui angular https://www.infragistics.com/products/ignite-ui-angular/angular/components/calendar.html

Вопрос

Как мне интегрировать мой календарь с формой и иметь возможность отправить его?


angular datepicker angular-reactive-forms angular-forms controlvalueaccessor
person The Dead Man    schedule 06.07.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы должны сделать свой компонент app-calender настраиваемым элементом управления формой. Одна хорошая статья об этом: https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

Короче говоря, ваш AppCalenderComponent должен реализовать интерфейс ControlValueAccessor, чтобы иметь возможность общаться с formGroup. После того, как вы успешно реализовали ControlValueAccessor для своего AppCalenderComponent, вы можете включить его в форму, как показано ниже:

<form [formGroup]="form">
  <app-calendar formControlName="nameOfTheDatePickerControl"></app-calendar>
</form>
person Envil    schedule 06.07.2018
comment
Привет, я создал, как вы мне посоветовали, но получаю сообщение об ошибке, вот мой новый поток: заголовок stackoverflow.com/questions/51210526/ - person The Dead Man; 06.07.2018