Question

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

Posted July 6, 2021 57 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
1 comment
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!