Блог

Главная - Вопросы по программированию - Изменение шаблона проверки во время выполнения в Angular

Изменение шаблона проверки во время выполнения в 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>

Но что мне нужно, так это изменить шаблон во время выполнения. Возможно ли это с использованием форм, управляемых шаблоном?

Комментарии:

1. Используете ли вы Реактивные формы?

2. Да, но я предпочитаю не менять его на реактивный, поскольку программа уже находится в производстве

3. когда вы говорите время выполнения, в какой момент вы хотите его изменить? и что является основой для его изменения

4. Я думаю, вы можете вставить другой ввод с шаблоном, который вам нужен, и использовать ngIf для отображения ввода, который вам нужен.

5. Я бы выбрал пользовательскую директиву — angular.io/guide/attribute-directives

Ответ №1:

Вы можете привязать директиву pattern, как и любую другую директиву. Вот небольшой пример. Вы можете изменить шаблон или заданное значение.

 <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