Question

5+ hours on this dang tutorial and I cannot figure out why it errors out.

Within the HTML page for the tutorial, I keep getting 63 - error TS2531: Object is possibly ‘null’.

21       <div formArrayName="queryFormItems" *ngFor="let item of queryForm.get('formItems')['controls']; let i = index;">

.ts
-------------------------------
  public queryForm: FormGroup;
  public queryFormItems: FormArray;


  public ngOnInit(): void {
    this.queryForm = this.formBuilder.group({
      customerName: '',
      email: '',
      formItems: this.formBuilder.array([this.createFormItem()])
    });
  }


  /**
   * Dynamically add an item to the form.
   */
  public addItem(): void {
    // Get any current form items
    this.queryFormItems = this.queryForm.get('formItems') as FormArray;

    // Push in a default form item
    this.queryFormItems.push(this.createFormItem());
  }

  /**
   * Create an item for the form to use
   * @returns {FormGroup}
   * @private
   */
  public createFormItem(): FormGroup {
    return this.formBuilder.group({
      name: '3080',
      description: 'GPU Vid Card',
      price: 'priceless'
    });
  }

I’m at a complete loss and have spent over 5 hours on this. I can make a simple string array and loop over that with the *ngFor but the above just will NOT work.

Show comments

Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer