[英]Angular: multiple fields in just one formControlName, reactive form
Is it possible to bind more than one field in just one formControlName
, or do something similar to get the same result? 是否可以仅在一个
formControlName
绑定多个字段,或者做类似的事情以得到相同的结果? I tried this but each select overwrites another. 我试过了,但是每个选择都会覆盖另一个选择。
Here a stackbliz exemple: https://stackblitz.com/edit/angular-tjgycw?file=src/app/app.component.html 这是一个stackbliz示例: https ://stackblitz.com/edit/angular-tjgycw ? file = src/app/app.component.html
It is not possible to have form control names with shared model. 表单控件名称不能与共享模型一起使用。
But in your case you can merge control models like this: 但是您可以合并这样的控制模型:
TS
TS
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms'
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
name = 'Angular';
acessoForm: FormGroup;
listaPermissoes: any[];
constructor(
private builder: FormBuilder,
) {
}
ngOnInit() {
this.listaPermissoes = [
{
"id": 2,
"nome": "grupo.perm.cadeira",
"permissoes": [
{
"id": 6,
"nome": "perm.cadastrarCadeira"
},
{
"id": 7,
"nome": "perm.alterarCadeira"
},
]
},
{
"id": 4,
"nome": "grupo.perm.mesa",
"permissoes": [
{
"id": 15,
"nome": "perm.cadastrarMesa"
},
{
"id": 16,
"nome": "perm.alterarMesa"
},
]
}]
this.acessoForm = this.builder.group(
this.listaPermissoes.map((item, index) => `permissoes-${index}`)
.reduce((pre, curr) => {
pre[curr] = [[]];
return pre; }, {}), {});
}
selectedPermissoes(){
return [].concat(...Object.values(this.acessoForm.value));
}
}
HTML
HTML
<form [formGroup]="acessoForm">
<div *ngFor="let listaPermissao of listaPermissoes; let i = index">
<div class="col-md-6">
<p>{{listaPermissao.nome}}</p>
</div>
<div class="col-md-6">
<select class="form-control" [formControlName]="'permissoes-'+i" multiple>
<option *ngFor="let permissao of listaPermissao.permissoes" [ngValue]="permissao">{{permissao.nome}}</option>
</select>
</div>
</div>
</form>
<pre>{{selectedPermissoes() | json}}</pre>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.