Question

组件模板中有select和input元素：

<select #dataType
    name="data_type"
    [(ngModel)]="model.data_type">
    <option *ngFor="let t of dataTypes" [value]="t.type">{{ t.name }}</option>
</select>

<input #typeTemplate
    name="type_template"
    type="text"
    pattern="[0-9]+"
    [(ngModel)]="model.type_template"/>

同样在组件代码中有一个这样的字典：

const patternsByTypes = {
    'int': '[0-9]+',
    // etc 'data_type' : 'pattern'
}

patternsByTypes字典描述了dataType选择值与typeTemplate输入模式之间的关系。

如果pattern选项的更改符合typeTemplate，如何更改dataType输入的patternsByType属性？

Answer 1

您需要具有如下所示的ngModelChange事件：

<select #dataType name="data_type" [(ngModel)]="model.data_type" (ngModelChange)="setPattern($event)">
   <option *ngFor="let t of dataTypes" [value]="t.type">{{ t.name }}</option>
</select>

<input #typeTemplate name="type_template" type="text" [pattern]="selectedPattern"
[(ngModel)]="model.type_template"/>

<强>组件

您需要更改字典，如下所示：

const patternsByTypes = {
 'int': '[0-9]+',
 //etc
}
 selectedPattern:any;
 setPattern($event){
  this.selectedPattern = this.patternsByTypes[$event];
 }

希望它有所帮助!!

Answer 2

您可以通过添加方括号使图案动态化。

    [pattern]="model.data_type"

Angular 2-4：根据其他元素的值更改元素属性

2 个答案: