Question

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

Posted July 6, 2021 120 views
Angular

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.

edited by KFSys
Submit an answer

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