如何在 Angular 8 上使用自定义 angular-bootstrap 的 NgbDateParserFormatter？答案

【问题标题】：How do I use a custom angular-bootstrap's NgbDateParserFormatter on Angular 8?如何在 Angular 8 上使用自定义 angular-bootstrap 的 NgbDateParserFormatter？
【发布时间】：2021-03-24 04:04:22
【问题描述】：

我正在尝试自定义 Angular-Bootstrap datapicker 的日期在使用 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>

当我点击日期选择器中的日期时，这是我在代码中包含的调试的输出：

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

【问题讨论】：

标签： javascript angular typescript angular-bootstrap

【解决方案1】：

而不是

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.: 注意年份日期倒置

【讨论】：