Question

我有一个表单，其中一些输入与lang循环，当我提交表单时，输入的名称是字符串而不是对象。是否可以返回对象，或者创建该对象以发送到api的最佳方法是什么？

我的模板

<form class="kt-form" (ngSubmit)="onSubmit(f)" #f="ngForm">     
   <label>Name</label>
   <input *ngFor="let lang of aLang" 
      type="text" 
      class="form-control"
      name="translations.{{lang}}.name" 
      ngModel
   >
   <button type="submit" class="btn btn-primary">Submit</button>
</form>

在我的组件中

onSubmit (form: NgForm){
   let datas = form.value; 
   console.log(datas);
}

现在，我得到以下结果：

Object { "translations.fr.name": "", "translations.nl.name": "", "translations.en.name": "" }

感谢您的帮助！

Answer 1

如果我正确理解了该问题，则应仅将语言发送到API。因此，将HTML更改为：

 <form class="kt-form" (ngSubmit)="onSubmit(f)" #f="ngForm">     
   <label>Name</label>
   <input *ngFor="let lang of aLang" 
      type="text" 
      class="form-control"
      name="{{lang}}" 
      ngModel
   >
   <button type="submit" class="btn btn-primary">Submit</button>
</form>

Answer 2

如果我理解正确，那么您想要这样的东西。

@UtilityClass

<input *ngFor="let lang of aLang" type="text" class="form-control" [attr.name]="lang.name" ngModel>这些括号将使属性可绑定，因此您可以从数组或对象中赋值。 []符号表示它不是Angular attr.属性，而是普通的HTML属性。

如何输入形式的数组？

2 个答案: