I am looking to create a universal template for both guest and customer registration forms, with varying validations.
Imagine we have a Register form for Guests where firstName is required
<form #f="ngForm" novalidate (ngSubmit)="save()">
<label>First Name:</label>
<input type="text" name="firstName" [(ngModel)]="values.FirstName" required #firstName="ngModel">
<div *ngIf="firstName.hasError('required') && (!firstName.pristine && !f.submitted)" class="text-danger">You must include a first name.</div>
</form>
For Customers, firstName is optional
<form #f="ngForm" novalidate (ngSubmit)="save()">
<label>First Name:</label>
<input type="text" name="firstName" [(ngModel)]="values.FirstName" #firstName="ngModel">
</form>
I aim to use one single template for both forms while accommodating different validations. How can I accomplish this? Thanks in advance!
NOTE: While I know that using reactive forms could achieve this, I prefer to do it with Template-Driven forms.