I need to implement two different patterns for the formControlName='value' based on the type selected. If type is 'A', I want to use the valuePattern, and if type is 'B', I want to use the uname pattern.
This is my HTML code:
<h1 mat-dialog-title>{{'DNS.Create entry' | translate }}</h1>
<div mat-dialog-content fxLayout="row" fxLayoutAlign="center center">
<form name="createEntryForm" [formGroup]="createEntryForm" fxLayout="column" fxFlex="100">
<mat-form-field>
<mat-label>Type</mat-label>
<mat-select placeholder="type" formControlName="type" [(ngModel)]="entrType">
<mat-option value="A">A</mat-option>
<mat-option value="CNAME">CNAME</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>Hostname</mat-label>
<input matInput formControlName="hostname" [pattern]="unamePattern">
<span matSuffix>.{{ domain.name }}</span>
<mat-error *ngIf="hostname.errors?.pattern">{{'DNS.Hostname not valid' | translate }}</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label *ngIf="entrType == 'A'">{{'DNS.IP address' | translate }}</mat-label>
<mat-label *ngIf="entrType == 'CNAME'">FQDN cible</mat-label>
<input matInput formControlName="value">
<mat-error *ngIf="value.errors?.pattern">
{{'DNS.Value not valid' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>TTL</mat-label>
<mat-select placeholder="ttl" formControlName="ttl" [(ngModel)]="ttlType">
<mat-option value="300">5 min</mat-option>
<mat-option value="3600">{{'DNS.1 hour' | translate }}</mat-option>
<mat-option value="86400">{{'DNS.1 day' | translate }}</mat-option>
</mat-select>
</mat-form-field>
</form>
This is my TypeScript code:
import { Component, Inject, ViewEncapsulation } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { Domain } from 'app/models/domain.model';
@Component({
selector: 'dnsaas-create-dialog',
templateUrl: 'dnsaas-create-dialog.component.html',
styleUrls: ['../dnsaas.component.scss'],
encapsulation: ViewEncapsulation.None,
})
export class CreateDialogComponent {
public entrType = 'A';
public ttlType = '86400';
unamePattern = "^[a-zA-Z0-9][a-zA-Z0-9\-\.]*[a-zA-Z0-9]$";
valuePattern = "(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)";
createEntryForm: FormGroup;
constructor(public createDialogRef: MatDialogRef<CreateDialogComponent>,
@Inject(MAT_DIALOG_DATA) public domain: Domain,
private _formBuilder: FormBuilder) { }
ngOnInit() {
this.createEntryForm = this._formBuilder.group({
domain_id: [this.domain.id],
type: ['', [Validators.required]],
hostname: ['', [Validators.required, Validators.pattern(this.unamePattern)]],
value: ['', [Validators.required, Validators.pattern(this.valuePattern)]],
ttl: ['', [Validators.required]]
});
}
onCancelClick(): void {
this.createDialogRef.close();
}
get hostname() {
return this.createEntryForm.get('hostname');
}
get value() {
return this.createEntryForm.get('value');
}
}
I am looking to apply two different patterns in one value form field. How can I achieve this?