Javascript 使用字符串插值将控件从FormGroup绑定到*ngFor内的模板

我试图做的是在输入文本标记中添加带有字符串插值的[formControl]属性。 让我给你看看代码

添加-team.component.ts

constructor(fb:FormBuilder) { 
 this.addTeamForm = fb.group({
  'textTeamName':[null,Validators.required],
  'player1':[null,Validators.required],
  'player2':[null,Validators.required],
  'player3':[null,Validators.required],
  'player4':[null,Validators.required],
  'player5':[null,Validators.required],
  'optionWicketKeeper':false      
});

add-team.component.html

 <label>Fill Player Names</label>
  <div class = 'row form-group' *ngFor = 'let player of players; let i = index;'>
      <input type='text' [(ngModel)] = 'player.name' [formControl] = 'addTeamForm.controls["player{{i+1}}"]' class ='form-control col' placeholder="{{p}} {{player.index}}">
</div>

---

有没有其他方法可以在*ngFor中使用插值{{}来在[formControl]属性中使用？

您也可以用其他方法来判断角度。使用以下代码：

<label>Fill Player Names</label>
  <div class = 'row form-group' *ngFor = 'let player of players; let i = index;'>
      <input type='text' [(ngModel)] = 'player.name' formControlName = "player{{i+1}}" class ='form-control col' placeholder="{{p}} {{player.index}}">
</div>

---

希望这会有帮助。如果不起作用，请告诉我。

这不会起作用；addTeamForm尚未绑定到Template中的任何位置，因此您在ts文件中创建了formGroup对象。第二重要的是，这不是我的错。并非每次每个人都提供完整的代码。很明显，您在模板中肯定使用了formGroup指令，这是我们所期望的。如果你正在做一些奇怪的事情，那么请澄清你的问题。问OP，但你正在做出许多不安全的假设。很明显，事实并非如此。通过在评论中留下问题来避免做假设。你为什么要这样做？按照建议，决定使用模板驱动或反应式表单：

<label>Fill Player Names</label>
  <div class = 'row form-group' *ngFor = 'let player of players; let i = index;'>
      <input type='text' [(ngModel)] = 'player.name' formControlName = "player{{i+1}}" class ='form-control col' placeholder="{{p}} {{player.index}}">
</div>