在渲染视图/模板之前等待 Angular 2 加载/解析 FormBuilder/ControlGroups答案

【问题标题】：Wait for Angular 2 to load/resolve FormBuilder/ControlGroups before rendering view/template在渲染视图/模板之前等待 Angular 2 加载/解析 FormBuilder/ControlGroups
【发布时间】：2016-10-25 13:16:53
【问题描述】：

有没有办法告诉 Angular2 等到 FormBuilder 及其元素 （及其关联的默认值） 加载完毕后再渲染模板？

目前我的表单中有以下内容

<form (ngSubmit)="submitFees()" [ngFormModel]="FeeForm">
    <div class="form-group row">
      <div class="col-sm-12">
        <input type="number" id="Fees" class="form-control"
        placeholder="Fee" required
       [ngFormControl]="FeeForm.controls['ContentFee']"
        [(ngModel)]="Fee">
      </div>
     Fee: {{postFee*1.2| number:'1.2-2'}}
  </div>
</form>

在我的构造函数中：

constructor(){
    let fb = new FormBuilder();
    this.FeeForm = fb.group({
        ContentFee: ['0', Validators.required]
    });
}

但是在页面加载时，在我编辑费用之前，该值显示为 NaN，理想情况下，我希望它在页面加载时显示其默认值 (0.00)。

我将如何做到这一点？

编辑

我注意到如果用户 [(ngModel)] FormBuilder 的默认值不再可用（当我尝试提交一个空白表单并记录 FeeForm.value 我得到未定义）。这附近有吗？

【问题讨论】：

标签： angular angular2-forms

【解决方案1】：

看起来您正在使用 RC1 中已弃用的表单，我知道这适用于 RC2+ 中的新表单

如果您的组件中有一个字段 Fee，您可以在构造函数中设置表单的初始值。

constructor(){
    this.Fee = 0 // This will show up as the default value 
    let fb = new FormBuilder();
    this.FeeForm = fb.group({
        ContentFee: ['0', Validators.required] // Value not used
    });
}

【讨论】：