时间戳

首页 > 解决方案 > 在 Angular 运行时更改验证模式

angular - 在 Angular 运行时更改验证模式

问题描述

我有一个模板驱动的表单，其模式验证工作正常：

<input type="text" [(ngModel)]="model.defaultVal" 
       name="defaultVal" pattern="[a-zA-Z ]*" />
<div *ngIf="defaultVal.touched || !defaultVal.pristine">
     <label *ngIf="defaultVal.control.hasError('pattern')">
           Invalid value
     </label>
</div>

但我需要的是在运行时改变模式。这可能使用模板驱动的表单吗？

标签： angular

解决方案

您可以像绑定任何其他指令一样绑定模式指令。这里有一个小例子。您可以更改模式或给定值。

<input type="text" [(ngModel)]="pattern" />

<input type="text" [(ngModel)]="defaultVal" 
      #test="ngModel" [pattern]="pattern" />

<div *ngIf="test.touched || !test.pristine">
  <label *ngIf="test.control.hasError('pattern')">
    Invalid value
  </label>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  defaultVal = 'Angular';
  pattern = '[a-zA-Z]*';
}

Stackblitz 示例：https ://stackblitz.com/edit/angular-mnvcnx

推荐阅读