For context, this is my form:
this.commentForm = this.fb.group(
{
commentId: [''],
commentType: ['', ExistsWithinList(this.commentTypes)],
commodity: ['', ExistsWithinList(this.commodities)],
title: ['', Validators.required],
description: ['', Validators.required],
dealerId: ['', Validators.required],
operator: ['', Validators.required]
},
{
updateOn: 'submit'
}
);
Template:
<form [formGroup]="commentForm" (ngSubmit)="submitForm()">
<div class="row">
<div class="col-lg-6">
<label for="title">Title</label>
<input type="text" id="title" class="form-control" formControlName="title" />
</div>
</div>
<br />
<div class="row">
<div class="col-sm-3">
<label for="commentType">Issue Type</label>
<select class="form-control" id="commentType" formControlName="commentType">
<option value="">--Select Type--</option>
<option *ngFor="let commentType of commentTypes">{{ commentType }}</option>
</select>
</div>
<div class="col-sm-3">
<label for="commodity">Commodity</label>
<select class="form-control" id="commodity" formControlName="commodity">
<option value="">--Select Commodity--</option>
<option *ngFor="let commodity of commodities">{{ commodity }}</option>
</select>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-12">
<label for="description">Description</label>
<textarea rows="10" class="form-control" formControlName="description" id="description">
</textarea>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-2">
<span *ngIf="dealerCommentCreation; else updateSubmitButtonBlock">
<input type="submit" class="btn btn-primary" value="Report" />
</span>
<ng-template #updateSubmitButtonBlock>
<input type="submit" class="btn btn-primary" value="Update" />
</ng-template>
</div>
</div>
</form>
When I focus on any of these fields, and then blur a field, all of the fields with 'Validators.required' highlight red (although, in the past, with newer versions of Angular, only one field highlights red)
Unfortunately I can't display the actual page (due to an NDA).
A snippet of relevant Angular dependencies (in package.json):
"@angular/common": "4.4.6",
"@angular/compiler": "4.4.6",
"@angular/core": "4.4.6",
"@angular/forms": "4.4.6",
"@angular/http": "4.4.6",
"@angular/platform-browser": "4.4.6",
"@angular/platform-browser-dynamic": "4.4.6",
"@angular/router": "4.4.6",
UPDATE -- So, after further investigation, I came to the realize that Angular 4's Reactive Forms had not yet supported the 'updateOn' property (That was a feature that became available with Angular 5+)
There are likely other ways to update your form's validation status (with Angular 4), but due to time constraints I migrated over to a Template-based solution -- most of the forms already established in this application are Template-based, and keeping our forms consistent gave me more reason to make the switch.
I will say, however, that I prefer Reactive forms, as they've made custom / asynchronous validation much cleaner (& seamless).