Средство выбора даты и времени Ionic 4 не обновляет свою переменную

Я использую средство выбора ionic 4 ion-datetime, чтобы попытаться выбрать дату в форме, хотя при выборе новой даты она не обновляет переменную.

Я пытался использовать все известные мне комбинации, но я включил их все в этот пример.

<form [formGroup]="upsert" (ngSubmit)="submitUpsert()">
  <ion-datetime
    display-format="MM DD, YYYY"
    picker-format="MM DD YYYY"
    min="2010"
    max="2030"
    class="form__group__item--input has-value"
    formControlName="date"
    placeholder="Select Date"
    [value]=date
    [(ngModel)]="event.today"
    (ngModelChange)="event.today"
  ></ion-datetime>
</form>

и в моем контроллере формы у меня есть:

constructor(
  private db: DatabaseService,
  private modalController: ModalController,
  private formBuilder: FormBuilder
) {
  this.upsert = this.formBuilder.group({
    title: ['', Validators.compose([Validators.required])],
    date: ['', Validators.compose([Validators.required])],
    notes: [''],
    location: [''],
    timezone: [''],
  });
  this.event.today = moment().toISOString(true);
  this.event.timezone = moment().format('ZZ');
}

И, в конце концов, я использую действие отправки формы

submitUpsert() {
  console.log("new date", this.event.today);
  if(this.upsert.invalid) {
    const error = {
      code: "001",
      message: this.upsert.status
    };
    this.showError(error);
  } else {
    this.db.upsert(this.upsert.value).then(eid => {
      console.log("Success", eid);
      this.hideUpsert();
    }, error => {
      this.showError(error);
      console.error(error);
    });
  }
}

В последней бета-версии API не упоминается использование [(ngModel)] или (ngModelChange), но это был единственный способ получить предварительно выбранную дату по умолчанию (сегодня).

К сожалению, это не обновление модели и объекта формы. Какие-нибудь мысли?


ionic-framework datepicker ionic4
person ntgCleaner    schedule 24.08.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы используете как ngModel, так и FormControlName. Используйте любой из них. вы можете обновить значение элемента управления формы, используя метод setValue().

this.event.today = moment().toISOString(true);
this.upsert.get('date').setValue(this.event.today);
person Suresh Kumar Ariya    schedule 24.08.2018

arrow_upward
0
arrow_downward

Попробуйте привязать модель следующим образом <ion-datetime [(ngModel)]="newsItem.validTo" name="validTo"></ion-datetime> Атрибут name требуется, если ion-datetime находится внутри ngForm. Это сработало для меня в Ionic 4.

person Patronaut    schedule 09.12.2019