contact-information.component.html
:
<div id="ContactInput" fxLayout="column" [formGroup]="contactForm">
<mat-form-field appearance="standard" fxFlex color="accent">
<mat-label>{{'ContactInformation.customer_name_heading' | translate}}</mat-label>
<input matInput [placeholder]="'ContactInformation.customer_name_heading' | translate"
[formControlName]="customerInputName">
</mat-form-field>
<mat-form-field appearance="standard" fxFlex color="accent">
<mat-label>{{'ContactInformation.patient_name_heading' | translate}}</mat-label>
<input matInput [placeholder]="'ContactInformation.patient_name_placeholder' | translate"
[formControlName]="patientInputName">
</mat-form-field>
<mat-form-field appearance="standard" fxFlex color="accent">
<mat-label>{{'ContactInformation.phone_heading' | translate}}</mat-label>
<input matInput [placeholder]="'ContactInformation.phone_heading' | translate"
[formControlName]="phoneInputName">
</mat-form-field>
<mat-form-field appearance="standard" fxFlex color="accent">
<mat-label>{{'ContactInformation.email_heading' | translate}}</mat-label>
<input matInput [placeholder]="'ContactInformation.email_placeholder' | translate"
[formControlName]="emailInputName">
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="center" id="ContinueButton">
<button (click)="goToNextScreen()"
class="btn-blue-width100-rounder"
[title]="'ContactInformation.continue' | translate"
[disabled]="!contactForm.valid">
{{ 'ContactInformation.continue' | translate }}
</button>
</div>
contact-information.component.ts
:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-contact-information',
templateUrl: './contact-information.component.html',
styleUrls: ['./contact-information.component.scss']
})
export class ContactInformationComponent implements OnInit {
private contactForm: FormGroup;
private readonly customerInputName = 'customerFullNameInput';
private readonly patientInputName = 'patientFullNameInput';
private readonly phoneInputName = 'phoneNumberInput';
private readonly emailInputName = 'emailInput';
constructor(formBuilder: FormBuilder) {
this.createForm(formBuilder);
}
ngOnInit() {
}
private createForm(formBuilder: FormBuilder) {
this.contactForm = formBuilder.group({
[this.customerInputName]: ['', Validators.required],
[this.patientInputName]: '',
[this.phoneInputName]: ['', Validators.required],
[this.emailInputName]: ['', Validators.email],
});
}
}
For more validation see Validation.