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

Posted 2023-02-09

我想要做的是在输入文本标记中添加带有字符串插值的[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      
);

附加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["playeri+1"]' class ='form-control col' placeholder="p player.index">
</div>

我需要在[formControl]属性的值中使用字符串插值运算符，以便它将读取控件（player1，player2，player3，player4，player5），因为我还使用了* ngFor（用于循环显示）。但我得到错误：

Error:
Uncaught Error: Template parse errors:
Parser Error: Got interpolation () where expression was expected at column 29 in [addTeamForm.controls["player i"]] in ng:///AppModule/AddTeamComponent.html@9:57 ("= 'let player of players; let i = index;'>

有没有其他方法可以在* 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 = "playeri+1" class ='form-control col' placeholder="p player.index">
</div>

希望它会有所帮助。如果不工作，请告诉我。