Angular 反应形式的NgbDatepicker：设置初始值

这可能是一段时间以来我处理过的最令人沮丧的问题之一。一般来说，日期，尤其是NgbDatepicker，在角度上有点难处理

我正在Angular 8中针对被动表单实现NgbDatepicker，问题的要点是我可以设置日期控件的初始值，但初始值不会在表单上直观显示。我可以将表单记录到控制台，并查看值是否已设置，但表单字段本身不会更新。如果我从选择器本身选择了一个日期，那么我的选择将反映在表单字段中。我原以为它会像设置ngbDatepicker输入的[startDate]属性一样简单，但显然不是。我在这方面尝试了很多不同的迭代；以下是代码方面的情况：

我的HTML：

<input #licenseExpiration="ngbDatepicker"
    class="form-control"
    fromControlName="licenseExpiration"
    [startDate]="startDate"
    ngbDatepicker />
<button class="btn btn-info zero-spacing pt-1 pr-1 pl-1"
    (click)="licenseExpiration.toggle()"
    type="button">

上面的HTML驻留在由该CertForm类型指定的formGroup中。该表单包含日期控件，部分外观如下：

export class CertForm extends FormGroup {
  public dateParser: CustomDateParserFormatter;

  constructor(
    cert: ICertModel = new CertModel()) {
    super({
      ..
      licenseExpiration: new FormControl("", Validators.required),
      ..
    });
  }

  setModel(cert: ICertModel) {
    this.patchValue({
      licenseExpiration
    });
  }

  getModel(): ICertModel {
    const cert = new CertModel();
    ...
    cert.licenseExpiration = this.get("licenseExpiration").value;
    ...
    return cert;
  }
}

从那里我有了自定义的解析器/格式化程序设置，它看起来就像NGB示例页面上的规范：

@Injectable({
  providedIn: "root"
})
export class CustomDateParserFormatter extends NgbDateParserFormatter {

  readonly DELIMITER = '/';

  parse(value: string): NgbDateStruct | null {
    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;
  }

  format(date: NgbDateStruct | null): string {
    return date ? date.month + this.DELIMITER + date.day + this.DELIMITER + date.year : '';
  }
}

再说一次，这似乎不允许我用一个可见的启动值启动日期字段。正如你所看到的，在这一点上，我只是硬编码了一个开始日期的返回值。这个日期确实被正确地设置了——当你打开选择器时，它就是到达的日期，但是当你到达页面时，它实际上不会显示在显示字段中。在您实际选择一个值之前，它是空的

我尝试了这么多不同的想法组合，但没有任何效果。这令人难以置信地沮丧。我看到这个问题的变体/片段确实已经存在，但我找不到使用这种技术组合提出这个问题的例子。大多数人在使用NgbDatepicker时似乎依赖模板表单，而不是反应表单。

date picker上的StartData属性未设置初始值。您应该将formControl的值设置为所需的值

这是一个没有解析器的示例。我在工作中使用了一个自定义解析器/格式化程序，它确实可以工作，但我不能在这里发布该代码

工作stackblitz注意：这是最新的Angular和NgBootstrap

应用程序组件

formGroup=新的formGroup{}； 恩戈尼特{ console.log'oninit'； this.formGroup.addControltest，新表单控件{日期：20，月份：4，年份：1969}//nice this.formGroup.valueChanges.subscribebeval=>{ console.logval； } console.logthis.formGroup.value； } 模板

打开 如果您的解析器仍然存在问题，请确保您同时拥有NgbDateParserFormatter和NgbDateAdapter，并且如果日期选择器上的startDatae属性未设置初始值，则适配器可以正确转换您要设置的初始值。您应该将formControl的值设置为所需的值

这是一个没有解析器的示例。我在工作中使用了一个自定义解析器/格式化程序，它确实可以工作，但我不能在这里发布该代码

工作stackblitz注意：这是最新的Angular和NgBootstrap

应用程序组件

formGroup=新的formGroup{}； 恩戈尼特{ console.log'oninit'； this.formGroup.addControltest，新表单控件{日期：20，月份：4，年份：1969}//nice this.formGroup.valueChanges.subscribebeval=>{ console.logval； } console.logthis.formGroup.value； } 模板

打开

---

如果您的解析器仍然存在问题，请确保您同时拥有NgbDateParserFormatter和NgbDateAdapter，并且您要将其设置为的初始值可以由适配器正确转换（如果不是Ngb日期对象）

谢谢。这并不是我具体案例的答案，但你在这里介绍的东西让我想到了这一点。一些问题正在发生。虽然我的OP代码示例没有显示它，但除了解析器/格式化程序之外，我还有一个自定义的NgbDateAdapter。我发现问题确实与那些返回格式不正确的值的方法有关。我想我现在有了。它似乎起作用了。谢谢你让我走上正轨。请与我们分享你的解决方案。我也有同样的问题。这并不是我具体案例的答案，但你在这里介绍的东西让我想到了这一点。一些问题正在发生。虽然我的OP代码示例没有显示它，但除了解析器/格式化程序之外，我还有一个自定义的NgbDateAdapter。我发现问题确实与那些返回格式不正确的值的方法有关。我想我现在有了。它似乎起作用了。谢谢你让我走上正轨。请与我们分享你的解决方案。我也有同样的问题

@Injectable({
  providedIn: "root"
})
export class CustomDateParserFormatter extends NgbDateParserFormatter {

  readonly DELIMITER = '/';

  parse(value: string): NgbDateStruct | null {
    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;
  }

  format(date: NgbDateStruct | null): string {
    return date ? date.month + this.DELIMITER + date.day + this.DELIMITER + date.year : '';
  }
}