Как изменить структуру модели углового питателя с начальной загрузкой ngbDatepicker

Question

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

<form-date 
  [label]="'Date of birth'" 
  [name]="'inputCPDDOB'"
  [(ngModel)]="birthDate"
  placeholder="mm/dd/yyyy"
  required
  >
</form-date>

Здесь я прошел birthDate как мой модельный объект.

я хочу

1. Пользователь должен иметь возможность выбрать дату, нажав кнопку CAL (рядом с текстовым полем),
2. Пользователь должен иметь возможность вводить дату в формате "ММ / ДД / ГГГГ" в текстовом поле.
3. После выбора или ввода даты модель должна быть обновлена ​​в виде строки в формате "ГГГГ-ММ-ДД" путем двухстороннего связывания данных.

Я успешно указал пункт № 1 и № 2 формат даты текстового поля как MM/DD/YYYY, унаследовав NgbDateParserFormatter

Но я не могу изменить структуру модели. Пока мне нужно общаться с моим веб-сервисом в формате "ГГГГ-ММ-ДД".

Пожалуйста, помогите мне достичь того же. Вот прикрепленный поршень.

Answer 1

Поэтому я думаю, что самый простой способ решить вашу проблему - предоставить собственную реализацию NgbDateAdapter и внедрить ее в свой компонент. Вам нужно будет добавить

{provide: NgbDateAdapter, useClass: NgbUTCStringAdapter}

Вам массив поставщиков компонентов и определите где-нибудь NgbUTCStringAdapter:

@Injectable()
export class NgbUTCStringAdapter extends NgbDateAdapter<string> {

  fromModel(date: string): NgbDateStruct {
    return (date && Number(date.substring(0, 4)) && Number(date.substring(5, 7) + 1) && Number(date.substring(8, 10))) ?
                {year: Number(date.substring(0, 4)),
                    month: Number(date.substring(5, 7)),
                    day: Number(date.substring(8, 10))} : null;
  }

  toModel(date: NgbDateStruct): string {
    return date ? date.year.toString() + '-' + String('00' + date.month).slice(-2)
                            + '-' + String('00' + date.day).slice(-2) : null;
  }
}

Другой способ сделать это - поместить этот код в свой пользовательский элемент управления примерно так:

@Component({
selector: 'app-date',
templateUrl: './date.component.html',
providers: [
    {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => DateComponent),
        multi: true
    },
    {provide: NgbDateParserFormatter, useClass: NgbDateOmniParserFormatter}]
})

export class DateComponent implements ControlValueAccessor {

  model;

  writeValue(value: any) {
    this.model =  (value && Number(value.substring(0, 4)) && 
                        Number(value.substring(5, 7) + 1) &&
                        Number(value.substring(8, 10))) ?
                            {year: Number(value.substring(0, 4)),
                             month: Number(value.substring(5, 7)),
                             day: Number(value.substring(8, 10))} : null;
  }

  propagateChange = (_: any) => {};

  registerOnChange(fn) {
    this.propagateChange = fn;
  }

  registerOnTouched() {}

  change() {
    const date = this.model ? this.model.year.toString() + '-' + 
                   String('00' + this.model.month).slice(-2) + '-' +
                   String('00' + this.model.day).slice(-2) : null;

    this.propagateChange(date);
  }
}

Answer 2

Похоже, просто проблема форматирования, так что проще всего использовать что-то вроде момента. Так что если вам нужно отправить дату DD / MM / YYYY к вашим услугам как YYYY-MM-DD. Так:

service.post(moment(this.textBox.value, 'DD/MM/YYYY').format('YYYY-MM-DD'));

должен сделать свое дело.

Смотрите http://momentjs.com/docs/ для получения информации о моментах.

Также это всегда полезно для использования require: Не удается найти имя 'require' после обновления до Angular4