Next, we want to work on adding our form, I used Angular Template-driven forms as the baseline tutorial to follow on figuring this out (I’ve never done this before).

We want to start a form as so:

<form *ngIf="!isExpandedForm" (ngSubmit)="onSubmit()" #projectionForm="ngForm">

In the above, you can see I’m only showing the form when !isExpandedForm , as to hide the form with a button click, and automatically when retrieving a new set of results. Additionally, the above shows that on submit, we are to invoke the onSubmit() function — this functions definition will come into play for posting to our api, and is handled in some to be defined typescript code.

The basic template for each form “item” will be (starting with the first as sample):

<div class="form-group">

<label for="yearsToProject">Years to project</label>

<input type="number" class="form-control" id="yearsToProject" name="yearsToProject" required [(ngModel)]="model.yearsToProject"

/>

</div>

The above is applied to all properties of our form model, all properties are numbers, and required.

Next, our submit button:

<button type="submit" class="btn btn-success" [disabled]="!projectionForm.form.valid">

Submit

</button>

In the above, you can see it’s pretty standard, but using a nice angular (directive?) the only enables the submit button the form is valid (in this case all fields are required, and must be specified as numbers).