Как отобразить дату в поле при использовании Angular - PullRequest
Новая
       9

Как отобразить дату в поле при использовании Angular

0 голосов
/ 10 апреля 2020

Я хочу получить входные значения от пользователя с помощью формы и сохранить его в базе данных. Затем я хочу отобразить сохраненные данные, используя эту же форму. Но даже если я получаю значения из этих полей ввода, я не могу отобразить полученные значения здесь; 

<input type="date" name="ArrivalDate" #ArrivalDate="ngModel" [(ngModel)]="service.formData.ArrivalDate" class="form-control">

И 

<input type="date" name="DepartureDate" #DepartureDate="ngModel" [(ngModel)]="service.formData.DepartureDate" class="form-control">

Снимок экрана: Показать полученные данные из базы данных но поля даты не заполнены необходимыми данными

/ ----- сегмент кода ----- / 

<div class="form-row">
            <div class="form-group col-md-4">
              <div class="form-group">
                  <label>Arrival Date</label>
                  <!--I want to get the date input from the user-->
                  <!--I want to display the date input which given by the user-->
                  <input type="date" name="ArrivalDate" #ArrivalDate="ngModel" [(ngModel)]="service.formData.ArrivalDate" class="form-control">
                  <div class="validation-error" *ngIf="ArrivalDate.invalid && ArrivalDate.touched">This field is required.</div>
              </div>
            </div>
            <div class="form-group col-md-4">
              <div class="form-group">
                  <label>Departure Date</label>
                   <!--I want to get the date input from the user-->
                  <!--I want to display the date input which given by the user-->
                  <input type="date" name="DepartureDate" #DepartureDate="ngModel" [(ngModel)]="service.formData.DepartureDate" class="form-control">
                  <div class="validation-error" *ngIf="DepartureDate.invalid && DepartureDate.touched">This field is required.</div>
              </div>
            </div>
            <div class="form-group col-md-4">
                <div class="form-group">
                  <label>Star Category</label>
                  <input name="StarCategory" #StarCategory="ngModel" [(ngModel)]="service.formData.StarCategory" class="form-control">
                  <div class="validation-error" *ngIf="StarCategory.invalid && StarCategory.touched">This field is required.</div>
              </div>
            </div>
        </div>

Ответы [ 2 ]

0 голосов
/ 10 апреля 2020

Проблема заключается в том, что средство выбора даты по умолчанию в браузере может отображать строки даты (не объекты даты) только с разделом даты (без времени).

Сначала необходимо преобразовать даты в строки, как в этом примере: https://stackblitz.com/edit/angular-zpntay?file=src / app / hello.component.ts 

@Component({
  selector: 'hello',
  template: `
  <form [formGroup]="myForm">
    <input type="date" formControlName="dateOfBirth">
  </form>`,
})
export class HelloComponent implements OnInit  {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      dateOfBirth: new Date('1988-05-15').toISOString().split('T')[0]
    });
  }
}
0 голосов
/ 10 апреля 2020

Вы можете попробовать вот так. Это минимальная форма с 2 полями даты. Вы можете добавить остальные поля.

в шаблоне компонента 

<form [formGroup]="dateForm" (ngSubmit)="onSubmit()">

  <label>
    Arrival Date:
    <input type="date" formControlName="ArrivalDate">
  </label>

  <label>
    Departure Date:
    <input type="date" formControlName="DepartureDate">
  </label>
  <input type="submit" />
</form>

<label> Arrival Date: {{dateForm.get("ArrivalDate").value}}</label>

<label> Departure Date: {{dateForm.get("DepartureDate").value}}</label>

в компоненте 

  import { FormGroup, FormControl } from "@angular/forms";

  arrivalDate : Date = new Date();
  departureDate : Date = new Date();
  dateForm = new FormGroup({
    ArrivalDate: new FormControl(this.arrivalDate.toISOString().split("T")[0]),
    DepartureDate: new FormControl(this.departureDate.toISOString().split("T")[0])
  });

  onSubmit(){
    console.log(this.dateForm.value);
  }

рабочий образец в стекаблице: https://stackblitz.com/edit/angular-xkgxxt

...