CODEWITHSUNDEEP
angularangular2-forms
Durham Smith
Durham Smith

Reputation: 157

Wait for Angular 2 to load/resolve FormBuilder/ControlGroups before rendering view/template

Is there a way to tell Angular2 to wait until a FormBuilder and its elements (with their associated default values) have loaded before rendering the template?

Currently I have the following in my form

<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>

and in my constructor:

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

However on the page load, before I edit the fee the value shows up as NaN, ideally I would like to have it show its default (0.00) on page load.

How would I accomplish this?

EDIT

I notice that if user [(ngModel)] that the defaults of FormBuilder are no longer available (when I try submit a blank form and log the FeeForm.value i get undefined). Is there away around this?

Upvotes: 0

Views: 945

Answers (1)

Keifer Caebe
Keifer Caebe

Reputation: 617

Looks like you are using the deprecated forms in RC1, I know this works with the new forms in RC2+

If you have a field Fee in your component you can set the initial value for the form in the constructor. 

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
    });
}

Upvotes: 0

Related Questions