I have this type of data

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

I tried with reactive forms. I got this error in console.ERROR Error: Cannot find control with path: 'flights -> 3'

I have missed some controls for flights. But I don't know how to resolve this.

My function is:

When I enter the no of children then, according to the no of children, the no of Input box of child age is appear. If I decrease the no of children no of input box of of age is decreasing. AND If I increase the no of children no of input box of of age is increasing

Below functions works but sometimes It gives wrong output. The issue with reactive form formcontrols.

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 file

<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>

Anyone help me to resolve this error.

CodePudding user response：

Listen on flightChild control changes and add controls accordingly inside childAges array.

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

In template iterate controls using 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