ERROR Error: Cannot find control with path: 'flights -> 3'

Question

我有这类数据

"inqury" : {
  "id":1,
  "flights":
     "id":1
      "flightChild": 3
      "flightChildAge":[10, 3, 9]
}

我试过反应形式。我在控制台中收到此错误。ERROR Error: Cannot find control with path: 'flights -> 3'

我错过了一些航班控制。但是不知道怎么解决。

我的函数是：

然后我输入children的编号，根据children的编号，出现child岁的输入框编号。如果我减少 children 的年龄输入框的数量正在减少。 AND 如果我增加 children 年龄输入框的数量正在增加

下面的函数可以工作，但有时会给出错误的输出。反应式表单控件的问题。

my.service.ts

resetForm() {
  this.form = this.fb.group({
    id:[''],

    flights: this.fb.group({
      id:[''],
      flightChild: [''],
      flightChildAge: this.fb.array([]),
    }),

.component.ts

noOfChild = 0;
noOfInfant = 0;
flightChildAges;
flightInfantAges;

async onNoOfChild(event) {
  const target = event.target.value;
   
  if (target != "") {
    if (target >= 0) {
   
      if (this.noOfChild > target) {
        for (var i = 0; i < (this.noOfChild - target); i++) {
          this.flightChildAges.pop();
            
        }
        this.noOfChild = event.target.value;
          
      } else if (this.noOfChild < target) {
        for (var i = 0; i < (target - this.noOfChild); i++) {
          this.flightChildAges.push(0);
            
        }
        this.noOfChild = event.target.value;  
      } else {
        return this.flightChildAges;
      }
    }
  }
  else {
    this.flightChildAges = [];
    this.noOfChild = 0;

  }
}

.html 文件

<div class="col-md-3">
  <div class="form-group">
    <label for="flightChild" class="label">No of Children in Flight (2YRS - 17YRS)
    </label>
    <input type="number" min="0" max="9" nbInput fullWidth id="flightChild" placeholder="No of Children in Flight"
                        formControlName="flightChild" 
                        (keyup)="onNoOfChild($event)"/>
  </div>
</div>

<div class="col-md-6" formControlName="flightChildAge">
  <div *ngFor="let child of flightChildAges; let i=index" >
    <label for="child-{{ i }}" class="label" >Child {{i+1}} age:</label>
    <input nbInput fullWidth id="child-{{ i }}" type="number" [formControlName]="i" [value]=child
                  min="3" max="17" required
                  (keyup)="onChildAgeChangeHandler($event, i)">
</div>

谁能帮我解决这个错误。

Answer 1

侦听 flightChild 控件更改并在 childAges 数组中相应地添加控件。

  onFlightChildChanges() {
    this.noOfFlightChild.valueChanges
      .pipe(
        map((n) => (n ? n : 0)),
        tap((n) => this.addChildAgeControls(n))
      )
      .subscribe((n) => {});
  }

  private addChildAgeControls(n: number): void {
    this.flightChildAges.clear();
    if (n !== 0) {
      Array<number>(n)
        .fill(0)
        .map((_) => this.flightChildAges.push(this.fb.control(0)));
    }
  }

  get noOfFlightChild(): FormControl {
    return this.flights.get('flightChild') as FormControl;
  }

  get flights(): FormGroup {
    return this.form.get('flights') as FormGroup;
  }

在模板中使用 flightChildAgeControls

迭代控件

<form [formGroup]="form">
  <div formGroupName="flights">
    ...
    <div class="col-md-6" formArrayName="flightChildAge">
      <div *ngFor="let child of flightChildAgeControls; let i = index">
        ...
      </div>
    </div>
  </div>
</form>

Demo

ERROR Error: Cannot find control with path: 'flights -> 3'

ERROR Error: Cannot find control with path: 'flights -> 3'

angular

angular-reactive-forms