Angular - 用于输入的动态 ngModel答案

【问题标题】：Angular - Dynamic ngModel for inputsAngular - 用于输入的动态 ngModel
【发布时间】：2021-06-08 09:48:41
【问题描述】：

如何为表单元素（即输入、选择）创建动态模型？

我有这个：

<input type="text" [name]="input.name" [(ngModel)]="input.name" [title]="input.title" />

其中的模型可以是任何东西（即地址、名字），因为它是动态生成的？

export class SampleComponent implements OnInit {

    inputs!:any[];

    constructor() { }

    ngOnInit(): void {

        console.log(this.inputs);

    }

}

我寻找了相关问题，这是最接近的Set a dynamic property in ngModel inside ngFor, with Angular 2，但我似乎可以做到这一点。还有其他方法可以实现吗？

Angular 版本：(12.0.2)

提前致谢！enter code here

【问题讨论】：

标签： angular

【解决方案1】：

您最好使用Reactive Forms 而不是Template Driven 表单来完成此任务，因为它在动态验证器和多个工作示例（包括this one on官方文档）。

由于您的模型具有 any 类型，这几乎可以回答您的问题 - 我认为无需重复官方文档（尽管如果您在谷歌上搜索 "angular dynamic form"，还有多个其他有效示例。

【讨论】：

感谢您的建议，我已经迁移了它，但是我仍然遇到的问题是如何制作动态的 FormControlName。你认为问一个新问题会更好吗，因为这似乎是一个单独的话题？
官方文档中的链接文章涵盖了这一点。看看Compose dynamic form contents 部分。它涵盖了formControlName 的绑定，例如[formControlName]="question.key"
是的，我已经这样做了，而且成功了！谢谢。我有一个奇怪的问题，当我在其中一个输入中添加该指令时，模板没有被呈现。我不认为这是异步问题，因为当我为 [formControlName] 使用不同的值时它正在工作
我认为最好在 stackblitz 中复制您的新问题并将其作为新问题发布。

【解决方案2】：

#I guess you might look at this
https://angular.io/guide/forms#bind-input-controls-to-data-properties

#import FormsModule

#create a template driven form
<form #myForm="ngForm">
<input type="text" class="form-control" id="name"
               required
               [(ngModel)]="input.name" name="input.name"
[title]="input.title"
               #name="ngModel">
<!-- for example -->
<select class="form-control" id="cities"
                required
                [(ngModel)]="model.city" name="cities"
                #cities="ngModel">
          <option *ngFor="let data of data" [value]="data">{{data}}</option>
        </select>
</form>
# here #cities, #name is just template ref variable can be used or avoided in case you don't need to track control of model

【讨论】：

感谢您抽出宝贵时间查看此内容和建议！