Why aren't all my data validations not validating as designed? - angularjs

Question

I am developing this application in Angular 2 that has a form that you can populate and if the form is not populated, it will prompt you with what needs to be populated. It works for Customer Name, but then for the rest, for example, "a list of tools is required" does not go away once populated. Here is the code below under app/proposal/proposal-new.component.html:
<h1>Create a Proposal</h1>
<div>
<form #proposalForm="ngForm">
<div class="form-group">
<label for="customer">Customer Name</label>
<input type="text" id="customer" placeholder="ABC Supply" required name="customer" #customer='ngModel' [(ngModel)]="proposal.customer">
<div [hidden]="customer.valid || customer.pristine">
Customer name is required
</div>
</div>
<div class="form-group">
<label for="portfolio_url">Portfolio URL</label>
<input type="text" id="portfolio_url" placeholder="ABC Supply" required name="portfolio_url" #portfolio_url='ngModel' [(ngModel)]="proposal.portfolio_url">
<div [hidden]="portfolio_url.valid || portfolio_url.pristine">
A Portfolio URL is required
</div>
</div>
<div class="form-group">
<label for="portfolio_url">Tools that you'll use on the project</label>
<input type="text" id="portfolio_url" placeholder="Ruby on Rails, Angular, etc" required name="tools" #portfolio_url='ngModel' [(ngModel)]="proposal.tools ">
<div [hidden]="tools.valid || tools.pristine">
A list of tools is required
</div>
</div>
<div class="form-group">
<label for="estimated_hours">Estimated hours</label>
<input type="number" id="estimated_hours" required name="estimated_hours" #portfolio_url='ngModel' [(ngModel)]="proposal.estimated_hours ">
<div [hidden]="estimated_hours.valid || estimated_hours.pristine">
You need to enter your estimated hours for the project
</div>
</div>
<div class="form-group">
<label for="hourly_rate">Hourly rate</label>
<input type="number" id="hourly_rate" required name="hourly_rate" #portfolio_url='ngModel' [(ngModel)]="proposal.hourly_rate ">
<div [hidden]="hourly_rate.valid || hourly_rate.pristine">
You need to enter your hourly rate for the project
</div>
</div>
<div class="form-group">
<label for="weeks_to_complete">Weeks to Complete</label>
<input type="number" id="weeks_to_complete" required name="weeks_to_complete" #weeks_to_complete='ngModel' [(ngModel)]="proposal.weeks_to_complete ">
<div [hidden]="weeks_to_complete.valid || weeks_to_complete.pristine">
You need to enter the weeks you estimate to complete the project
</div>
</div>
<div class="form-group">
<label for="weeks_to_complete">Client Email <em>(Optional)</em></label>
<input type="email" id="weeks_to_complete" name="weeks_to_complete" #client_email='ngModel' [(ngModel)]="proposal.client_email">
</div>
</form>
<div>
<p>Hi {{proposal.customer}},</p>
<p>It was a pleasure getting to meet with you and review your project requirements, I believe it is a great fit for the types of applications that I build out. Please feel free to check out some of my past projects here.</p>
<p>To successfully build out the application I will be utilizing {{proposal.tools}}, and a number of other tools to ensure that the project follows industry wide best practices.</p>
<p>Ensuring that you are fully informed is one of my top priorities, so in addition to incorporating everything we discussed, I will also be creating a project management dashboard and sending you a project update message daily so that you can have a transparent view of the development as it takes place.</p>
<p>To accomplish the project and meet the requirements that we discussed, I am estimating that it will take {{proposal.estimated_hours}} hours in development time to complete. The project should take {{proposal.weeks_to_complete}} weeks to complete and with my hourly rate of {{proposal.hourly_rate}}/hour, the estimated total will be {{proposal.hourly_rate * proposal.estimated_hours}}.</p>
<p>The next step from here is to set up a meeting to finalize the project and sign contracts.</p>
<p>I am excited to working with you and build out this project.</p>
</div>
Here is the app/proposal/proposal.ts:
export class Proposal {
constructor(
public id?: number,
public customer?: string,
public portfolio_url: string = 'http://',
public tools?: string,
public estimated_hours?: number,
public hourly_rate?: number,
public weeks_to_complete?: number,
public client_email?: string,
) {}
}
If there is any other files I should be looking at and posting, please let me know. I am stumped here.

Answer 1

The issue you are seeing is that the local variable portfolio_url is being defined multiple times instead of a new local variable for each input. If you update the local variable definitions, which look like this: #[var_name]='ngModel', to have a unique name for each the validation should work as expected.
Update your HTML to the following:
<h1>Create a Proposal</h1>
<div>
<form #proposalForm="ngForm">
<div class="form-group">
<label for="customer">Customer Name</label>
<input type="text"
id="customer"
placeholder="ABC Supply"
required name="customer"
#customer='ngModel'
[(ngModel)]="proposal.customer">
<div [hidden]="customer.valid || customer.pristine">
Customer name is required
</div>
</div>
<div class="form-group">
<label for="portfolio_url">Portfolio URL</label>
<input type="text"
id="portfolio_url"
placeholder="ABC Supply"
required
name="portfolio_url"
#portfolio_url='ngModel'
[(ngModel)]="proposal.portfolio_url">
<div [hidden]="portfolio_url.valid || portfolio_url.pristine">
A Portfolio URL is required
</div>
</div>
<div class="form-group">
<label for="portfolio_url">Tools that you'll use on the project</label>
<input type="text"
id="tools"
placeholder="Ruby on Rails, Angular, etc"
required
name="tools"
#tools='ngModel'
[(ngModel)]="proposal.tools ">
<div [hidden]="tools.valid || tools.pristine">
A list of tools is required
</div>
</div>
<div class="form-group">
<label for="estimated_hours">Estimated hours</label>
<input type="number"
id="estimated_hours"
required
name="estimated_hours"
#estimated_hours='ngModel'
[(ngModel)]="proposal.estimated_hours ">
<div [hidden]="estimated_hours.valid || estimated_hours.pristine">
You need to enter your estimated hours for the project
</div>
</div>
<div class="form-group">
<label for="hourly_rate">Hourly rate</label>
<input type="number"
id="hourly_rate"
required
name="hourly_rate"
#hourly_rate='ngModel'
[(ngModel)]="proposal.hourly_rate ">
<div [hidden]="hourly_rate.valid || hourly_rate.pristine">
You need to enter your hourly rate for the project
</div>
</div>
<div class="form-group">
<label for="weeks_to_complete">Weeks to Complete</label>
<input type="number"
id="weeks_to_complete"
required
name="weeks_to_complete"
#weeks_to_complete='ngModel'
[(ngModel)]="proposal.weeks_to_complete ">
<div [hidden]="weeks_to_complete.valid || weeks_to_complete.pristine">
You need to enter the weeks you estimate to complete the project
</div>
</div>
<div class="form-group">
<label for="weeks_to_complete">Client Email <em>(Optional)</em></label>
<input type="email"
id="weeks_to_complete"
name="weeks_to_complete"
#client_email='ngModel'
[(ngModel)]="proposal.client_email">
</div>
</form>
<div>
<p>Hi {{proposal.customer}},</p>
<p>It was a pleasure getting to meet with you and review your project requirements, I believe it is a great fit for the types of applications that I build out. Please feel free to check out some of my past projects here.</p>
<p>To successfully build out the application I will be utilizing {{proposal.tools}}, and a number of other tools to ensure that the project follows industry wide best practices.</p>
<p>Ensuring that you are fully informed is one of my top priorities, so in addition to incorporating everything we discussed, I will also be creating a project management dashboard and sending you a project update message daily so that you can have a transparent view of the development as it takes place.</p>
<p>To accomplish the project and meet the requirements that we discussed, I am estimating that it will take {{proposal.estimated_hours}} hours in development time to complete. The project should take {{proposal.weeks_to_complete}} weeks to complete and with my hourly rate of {{proposal.hourly_rate}}/hour, the estimated total will be {{proposal.hourly_rate * proposal.estimated_hours}}.</p>
<p>The next step from here is to set up a meeting to finalize the project and sign contracts.</p>
<p>I am excited to working with you and build out this project.</p>
</div>
Working Plunkr

Answer 2

You shouldn't need to do this:
#portfolio_url='ngModel' [(ngModel)]="proposal.portfolio_url"
In the Angular 2 docs they say:
The hash (#) prefix to "phone" means that we're defining a phone variable
So in your case you are defining portfolio_url multiple times in your code. You do not need to use the hash prefix because the portfolio_url is already defined in your proposal object.
The following should work (read more about the template binding syntax):
<input type="number" id="hourly_rate" required name="hourly_rate" [(value)]="proposal.hourly_rate">
Or you can do this:
<input type="number" id="hourly_rate" required name="hourly_rate" #proposal.hourly_rate>
The angular 2 docs also have another example of user input: https://angular.io/docs/ts/latest/guide/user-input.html