Как мне использовать пользовательский NgbDateParserFormatter angular-bootstrap на Angular 8?

Я пытаюсь настроить способ отображения дат диспетчера данных Angular-Bootstrap в форме используя NgbDateParserFormatter, как указано здесь:

https://ng-bootstrap.github.io/#/components/datepicker/examples#adapter

Я хочу, чтобы дата в поле формы класса была в формате год-месяц-день, а день / месяц / год презентации. Итак, я использовал этот код в компоненте:

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

    readonly DELIMITER = '-';

    fromModel(value: string | null): NgbDateStruct | null {
        console.log('fromModel start', value);
        if (value) {
            let date = value.split(this.DELIMITER);
            return {
                day: parseInt(date[0], 10),
                month: parseInt(date[1], 10),
                year: parseInt(date[2], 10)
            };
        }
        return null;
    }

    toModel(date: NgbDateStruct | null): string | null {
        console.log('toModel start', date);
        let res: string = date ?
            date.year + this.DELIMITER + (date.month + '').padStart(2, "0") + this.DELIMITER + (date.day + '').padStart(2, "0")
            : null;
        console.log('toModel end', res);
        return res;
    }
}

@Injectable()
export class CustomDateParserFormatter extends NgbDateParserFormatter {

    readonly DELIMITER = '/';

    parse(value: string): NgbDateStruct | null {
        console.log('parser start', value);
        if (value) {
            let date = value.split(this.DELIMITER);
            console.log('parser end', date);
            return {
                day: parseInt(date[0], 10),
                month: parseInt(date[1], 10),
                year: parseInt(date[2], 10)
            };
        }
        return null;
    }

    format(date: NgbDateStruct | null): string {
        console.log('formatter start', date);
        let res: string = date ?
             (date.day + '').padStart(2, "0") + this.DELIMITER + (date.month + '').padStart(2, "0") + this.DELIMITER + date.year
            : null;
        console.log('formatter end', res);
        return res;
    }
}

@Component({
    <...>
    providers: [
        { provide: NgbDateAdapter, useClass: CustomAdapter },
        { provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter }
    ]
})
export class MyComponent implements OnInit {
    myForm: FormGroup;
    <...>
    dpModel: any;

    constructor(
        <...>
        private ngbCalendar: NgbCalendar,
        private dateAdapter: NgbDateAdapter<string>
    ) {
        this.myForm = this.formBuilder.group({
            <...>
            date: [''],
            <...>
        });
    }

и этот в шаблоне:

<div class="form-group">
    <label for="data" class="col-form-label">Date:</label>
    <div class="input-group">
      <input class="form-control" placeholder="dd/mm/yyyy"
            name="data" [(ngModel)]="dpModel" 

            ngbDatepicker #d="ngbDatepicker" formControlName="data">
      <div class="input-group-append">
           <button class="btn btn-outline-secondary fa fa-calendar-alt" (click)="d.toggle()"></button>
      </div>
    </div>
</div>

Когда я нажимаю дату внутри datepicker, это результат отладки, которую я включил в код:

toModel start NgbDate {year: 2020, month: 6, day: 18}
toModel end 2020-06-18
fromModel start 2020-06-18
formatter start null
formatter end null
toModel start null
toModel end null
fromModel start null
fromModel start 2020-06-18

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

В приведенном выше коде я использую [(ngModel)]="dpModel" в качестве теста. Я действительно хочу использовать myform.date. Но я уже пробовал [(ngModel)]="myForm.date" и пробовал удалить полностью.

Я использую Angular 8


typescript javascript angular angular-bootstrap
person Nelson Teixeira    schedule 03.06.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вместо того

fromModel(value: string | null): NgbDateStruct | null {
    console.log('fromModel start', value);
    if (value) {
        let date = value.split(this.DELIMITER);
        return {
            day: parseInt(date[0], 10),
            month: parseInt(date[1], 10),
            year: parseInt(date[2], 10)
        };
    }
    return null;
}

использовать

fromModel(value: string | null): NgbDateStruct | null {
    if (value) {
        let date = value.split(this.DELIMITER);
        return {
            year: parseInt(date[0], 10),
            month: parseInt(date[1], 10),
            day: parseInt(date[2], 10)
        };
    }
    return null;
}

PS: Обратите внимание на инверсию года ‹-› дня

person Cleber Angelo Capellari    schedule 23.03.2021