我有我的表格的这一部分：
<div formArrayName="studentPublishing" *ngFor="let all of getstudentPublishing().controls; index as i">
<div class="form-group data">
<input type="text" list="options" class="form-control" placeholder="Students" (change)="getAuthor($event,i)" [formControlName]="i" required>
<datalist id="options">
<option *ngFor="let c of dataStudent" [value]="c.name">{{ c.name }}</option>
</datalist>
<div class="rem"><button (click)="removeAuthor(i)">-</button></div>
<div *ngIf="!formPublic.get('studentPublishing')?.valid && formPublic.get('studentPublishing')?.touched" class="validation-error">
<p>Authors are mandatory</p>
</div>
</div>
</div>
<div id="add" class="add"><button type="button" (click)="addAuthor()">Author +</button></div>一切都正常工作。值是Student对象，它已经包含了数据库中的数据。这里的问题是，当我在输入中选择Student时，它显示[object Object]。
这是我在Typescript中的函数，它从数据列表中获取值并将其写入以下形式的student数组变量：
getAuthor(e: any, id:number){
const studentName = e.target.value;
const studentSelected = this.dataStudent.find(x => x.name === studentName);
if (studentSelected) {
this.getstudentPublishing().at(id).setValue(studentSelected);
}
}我使用ngValue并尝试使用json管道转换值：
<option *ngFor="let c of dataStudent" [ngValue]="c">{{ c.name | json }}</option>我尝试将值作为字符串与所选对象的名称一起传递：
<option *ngFor="let c of dataStudent" value="{{ c.name }}"></option>但是当我在变量中保存值时，只保存名称，我需要整个对象。
以下是选择学生时输入的外观：
input datalist image with [object Object]
这是我希望它看起来如何确定哪个学生被选中：
input datalist image with selected student's name
1条答案
按热度按时间lhcgjxsq1#
问题是，您让FormControl尝试执行双重任务-值应该是字符串名称还是Student对象？以下只是您可以尝试的几种策略之一。
使FormControl元素存储字符串值
在这种情况下，每个控件的类型都是 FormControl。在该控件上，您可能已经有了一个Required Validator，但请继续添加现有的学生姓名验证器。它可能看起来像这样：
现在，当您需要FormArray值作为Student对象的数组时，您所要做的就是检查表单是否处于 valid 状态，并使用 * Array.map（）* 转换该值。
还有很多其他的考虑因素，比如名字匹配是否不区分大小写，或者如果多个学生有相同的名字会发生什么，但这应该让你开始。