Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML:
<div [formGroup]="userFormGroup">
<div class="row" formGroupName="userGroup">
<div class="userinfo col-md-6">
<mat-form-field [floatLabel]="'always'">
<input matInput class="domainPrefixValidate" formControlName="prefixField" (blur)="checkPrefix()" placeholder="DOMAIN PREFIX" required>
<span matSuffix>.onmicrosoft.com</span>
</mat-form-field>
<mat-form-field [floatLabel]="'always'">
<input matInput class="userNameValidate" formControlName="userNameField" placeholder="USER NAME" requried>
<mat-icon matSuffix class="usernameicon" placement="top" ngbTooltip="Default login is admin">info</mat-icon>
</mat-form-field>
<mat-form-field [floatLabel]="'always'">
<input matInput class="firstNameValidate" formControlName="firstNameField" placeholder="FIRST NAME" required>
</mat-form-field>
<mat-form-field [floatLabel]="'always'">
<input matInput class="lastNameValidate" formControlName="lastNameField" placeholder="LAST NAME" required>
</mat-form-field>
<mat-form-field [floatLabel]="'always'">
<input matInput class="companyNameValidate" formControlName="companyNameField" placeholder="COMPANY NAME" required>
</mat-form-field>
<mat-form-field [floatLabel]="'always'">
<input matInput class="emailValidate" formControlName="emailField" placeholder="EMAIL" required>
</mat-form-field>
</div>
<div class="userinfo col-md-6">
<mat-form-field [floatLabel]="'always'">
<input matInput class="addressLine1Validate" formControlName="addressLine1Field" placeholder="ADDRESS LINE 1" required>
</mat-form-field>
<mat-form-field [floatLabel]="'always'">
<input matInput class="addressLine2Validate" formControlName="addressLine2Field" placeholder="ADDRESS LINE 2">
</mat-form-field>
<mat-form-field [floatLabel]="'always'">
<input matInput class="addressLine3Validate" formControlName="addressLine3Field" placeholder="ADDRESS LINE 3">
</mat-form-field>
<mat-form-field [floatLabel]="'always'">
<input matInput class="suburbValidate" [matAutocomplete]="autoSuburb" formControlName="suburbField" placeholder="SUBURB" required>
<mat-autocomplete #autoSuburb="matAutocomplete">
<mat-option *ngFor="let option of filteredSub | async" [value]="option?.suburb" (click)="chooseAutoComplete(option)">
{{option?.suburb+", "+option?.state+", "+option?.postcode}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field [floatLabel]="'always'">
<mat-select class="stateValidate" placeholder="State" formControlName="stateField" required>
<mat-option value="{{state}}" *ngFor="let state of stateList">{{state}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field [floatLabel]="'always'">
<input matInput class="postcodeValidate" maxlength="4" (keypress)="_keyPress($event)" formControlName="postcodeField" [matAutocomplete]="autoPostcode" placeholder="POST CODE" required>
<mat-autocomplete #autoPostcode="matAutocomplete">
<mat-option *ngFor="let option of filteredPostCode | async" [value]="option?.postcode" (click)="chooseAutoComplete(option)">
{{option?.suburb+", "+option?.state+", "+option?.postcode}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field [floatLabel]="'always'">
<input matInput (keypress)="_keyPress($event)" class="phoneValidate" formControlName="phoneField" placeholder="PHONE" required>
</mat-form-field>
</div>
</div>
</div>
component:
filteredPostCode: Observable<SuburbList[]>;
filteredSub: Observable<SuburbList[]>;
ngOnInit() {
this.filteredPostCode = this.userFormGroup.get('userGroup.postcodeField').valueChanges
.pipe(
startWith(''),
map(value => this._filterPostcode(value))
);
this.filteredSub = this.userFormGroup.get('userGroup.suburbField').valueChanges
.pipe(
startWith(''),
map(value => this._filterSuburb(value))
);
}
getUserGroup(): FormGroup {
return this.formBuilder.group({
prefixField: new FormControl("", Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9]+$')])),
firstNameField: new FormControl("", Validators.compose([Validators.required])),
lastNameField: new FormControl("", Validators.compose([Validators.required])),
emailField: new FormControl("", Validators.compose([Validators.required, Validators.email])),
userNameField: new FormControl({ value: "admin", disabled: true }, Validators.required), // disable this field
companyNameField: new FormControl("", Validators.compose([Validators.required])),
addressLine1Field: new FormControl("", Validators.compose([Validators.required])),
addressLine2Field: new FormControl(""),
addressLine3Field: new FormControl(""),
suburbField: new FormControl("", Validators.compose([Validators.required])),
stateField: new FormControl("", Validators.compose([Validators.required])),
postcodeField: new FormControl("", Validators.compose([Validators.required])),
phoneField: new FormControl("", Validators.compose([Validators.required]))
});
}
chooseAutoComplete(option: SuburbList): void {
this.userFormGroup.get('userGroup.postcodeField').setValue(option.postcode);
this.userFormGroup.get('userGroup.stateField').setValue(option.state);
this.userFormGroup.get('userGroup.suburbField').setValue(option.suburb);
}
private _filterPostcode(value: string): SuburbList[] {
if (value && value.length > 2) {
let filterValue = value.toLowerCase();
return this.geoData.filter(option => option.state && option.postcode.toLowerCase().includes(filterValue));
}
}
private _filterSuburb(value: string): SuburbList[] {
if (value && value.length > 2) {
let filterValue = value.toLowerCase();
return this.geoData.filter(option => option.state && option.suburb.toLowerCase().includes(filterValue));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.