Question

这是我的代码，我想在formcontrolname ='value'中使用2种不同的模式如果type =='A'使用valuePattern如果type =='B'使用uname模式

这是我的代码html：

 <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>

这是我的代码ts

 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');
}

}

我想以一种值的形式使用2种模式：

Answer 1

要在一个formControl中使用多个验证器，您必须调用Validator类的compose方法，例如：

hostname: ['', Validator.compose([Validators.required, Validators.pattern(this.unamePattern)]),

Answer 2

您需要一个自定义验证器

 validateConditionalPattern(c: FormControl) {
    if (c.dirty && c.value.name.test(this.pattern)) {
           // DO your logic here using pattern to return true/false
           return {
            validateConditionalPattern: {
                valid: false
            };
    } 
    return  null;
  }

现在您可以在其他验证器中或与Validators.compose一起使用此功能。

在一个值中使用多个validaters.pattern

2 个答案: