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

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 select 值和 typeTemplate 输入模式之间的关系。

如果 dataType select 已根据 patternsByType 更改，如何更改 typeTemplate 输入的 pattern 属性？

Answer 1

您可以通过添加方括号使模式动态化。

    [pattern]="model.data_type"

Answer 2

您需要像下面这样的 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];
 }

希望对您有所帮助！！

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

Angular 2-4: Changing element attribute depending on value other element

angular2-forms

angular