必须在索引处为表单控件提供一个值:1 - 错误

Question

我正在使用带有垫子自动完成的反应式表单。我在应用程序的其他部分使用了自动完成功能，但我无法弄清楚这一点。我有一个表单数组，每次我想在我的情况下添加新传感器时都会添加一个输入。自动完成在我的第一个输入中工作正常，但是当我尝试添加更多输入时显示错误：错误：必须在索引：1处为表单控件提供一个值

.HTML：

<div class="row">
<div class="input-field col s10">
<div class="form-group">
<div formArrayName="sensors_id">
<div *ngFor="let sensor of addHomeboxPForm.get('sensors_id')['controls']; let i = index">
<br>
<input formControlName="{{i}}" type="text" placeholder="Select Sensor" aria-label="Number" matInput [matAutocomplete]="auto1">
<mat-autocomplete autoActiveFirstOption #auto1="matAutocomplete" [displayWith]="displayWith" >
<mat-option (onSelectionChange)="updateForm($event, [sensor.sensors_id], 'sensors_id')" *ngFor="let sensor of filteredOptionsS | async" [value]="sensor.sensor_serial">
{{sensor.sensor_serial}}
</mat-option>
</mat-autocomplete>
<div class="button-left">
<button *ngIf="addHomeboxPForm.controls.sensors_id.value.length > 1" type="button" class="fa" (click)="onRemoveItem(i)">RemoveSensor</button>
</div>
</div>
</div>
</div>

<div class="input-field col s2">
<button type="button" class="btn" (click)="onAddItem()">AddSensor</button>
</div>

TS：

形式阵列：'sensors_id': this.fb.array([], Validators.required),

updateForm(ev: any, idd: any, componentid: any) {
if (ev.isUserInput) {
if (componentid === 'sensors_id') {
this.sensorId = idd;
this.addHomeboxPForm['controls']['sensors_id'].setValue([ev.source.value])
}
}
}
onAddItem() {
(<FormArray>this.addHomeboxPForm.controls['sensors_id']).push(new FormControl('', Validators.required));
}
onRemoveItem(index: number) {
(<FormArray>this.addHomeboxPForm.controls['sensors_id']).removeAt(index);
}

我是新手，所以如果我不清楚，我很抱歉。但我还没有找到解决方案

Answer 1

在模板 html 中使用它之前，应该在组件中定义 fortmcontrolName。

我看到您使用了无效的<input formControlName="{{i}}"因为 Angular 无法找到最初声明反应式表单的这个 formControl/字段。

在组件类中创建控件后，必须将其与模板中的窗体控件元素相关联。使用 ReactiveFormsModule 中包含的 FormControlDirective 提供的 formControl 绑定更新表单控件的模板。

您可以在此处阅读有关反应式表单的更多信息：

希望对您有所帮助。

Answer 2

此错误可能是因为您忘记将 setValue 函数设置为数组，而是将其设置为对象(请注意括号 [](：

例： 在这里你会得到错误。错：

this.checkoutForm.get('items').setValue({
itemId: ['1aa'],
itemName: ['2aa'],
itemDesc: ['3bb'],
itemDone: ['', Validators.requiredTrue]
});

右：

this.checkoutForm.get('items').setValue([{
itemId: ['1aa'],
itemName: ['2aa'],
itemDesc: ['3bb'],
itemDone: ['', Validators.requiredTrue]
}]);

.html：

<div class="form-group">
<label for="exampleInputPassword1">Items</label>
<div class='col-sm-10' formArrayName="items">
<div *ngFor="let item of checkoutForm.controls.items['controls']; let i=index" [formGroupName]="i">
<a [routerLink] (click)="removeitem(i)">remove</a>
<input class="form-control" type="text" formControlName="itemId" id=task{{i}}>
<input class="form-control" type="text" formControlName="itemName" id="task{{i}}">
<input class="form-control" type="text" formControlName="itemDesc" id="task{{i}}">
<input type="checkbox" formControlname="itemDone">Mark as Done
</div>
</div>
</div>

Answer 3

更新时，请使用patchValue((方法而不是setValue((方法。

在您的情况下，它将是 -

updateForm(ev: any, idd: any, componentid: any) {
if (ev.isUserInput) {
if (componentid === 'sensors_id') {
this.sensorId = idd;
this.addHomeboxPForm['controls']['sensors_id'].patchValue([ev.source.value])
}
}
}
onAddItem() {
(<FormArray>this.addHomeboxPForm.controls['sensors_id']).push(new FormControl('', Validators.required));
}
onRemoveItem(index: number) {
(<FormArray>this.addHomeboxPForm.controls['sensors_id']).removeAt(index);
}