Question

我正在使用具有自动完成功能的反应形式。我在应用程序的其他部分中使用了自动完成功能，但我不知道这是什么。我有一个formarray，每次我想在我的情况下添加新传感器时都会添加输入.autocomplete在我的第一个输入中工作正常，但是当我尝试添加更多输入时，显示错误： 错误：必须在索引：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：

formarray：'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

您必须在组件中定义fortcontrolName，然后才能在模板html中使用它。

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

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

您可以阅读有关reactive forms here:

的更多信息

希望有帮助。

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);
  }

错误：必须在索引：1处提供用于表单控制的值

3 个答案: