Angular 6: Set empty form array field

Question

I'm using Angular 6. and Reactive form builder to build a form.

ngOnInit() {
    this.landingPageForm = this.formBuilder.group({
      title: new FormControl('', [
        Validators.required
      ]),
      description: new FormControl('', [
        Validators.required
      ]),
      faqs: this.formBuilder.array([
        this.createFaqFields()
      ]),
    });

    this._setFormValue();
}

createFaqFields(): FormGroup {
  return this.formBuilder.group({
    question: new FormControl(),
    answer: new FormControl()
  });
}

private _setFormValue() {
    if (this.product) {
      this.landingPageForm.setValue({
        title: this.product.info.title,
        description: '',
        faqs: [],
      });
    }
  }

I have to prefill few fields initially and faqs is an array field in which new fields are generated dynamically by calling

onClickAddFaqField(): void {
  this.faqFields = this.landingPageForm.get('faqs') as FormArray;
  this.faqFields.push(this.createFaqFields());
}

Initially, there is only one faq input field in HTML and that empty. But it is giving an error

"Must supply a value for form control at index: 0.

How can I initialize the array input field empty?

PeS · Accepted Answer · 2018-09-21 02:34:07Z

1

I guess, I would do this:

ngOnInit() {
  this.landingPageForm = this.formBuilder.group({
    title: new FormControl('', [Validators.required]),
    description: new FormControl('', [Validators.required]),
    faqs: this.formBuilder.array([])
  });

  // Try this
  // OTOH why when you set that to [] in _setFormValue()?
  this.landingPageForm.get('faqs').push(this.createFaqFields());

  this._setFormValue();
}

createFaqFields(): FormGroup {
  return new FormGroup({
    question: new FormControl(null),
    answer: new FormControl(null)
  });
}

answered Sep 21, 2018 at 2:34

PeS

4,0474 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anuj TBE Over a year ago

it gives error at .push Property 'push' does not exist on type 'AbstractControl'

Yuvaranjani · Accepted Answer · 2018-09-21 04:19:48Z

0

Instead of using FormControl() in createFaqFields(), try like this,

ngOnInit() {
      this.landingPageForm = this.formBuilder.group({
        title:'',
        description: '',
        faqs: this.formBuilder.array([this.createFaqFields()])
      });
        this._setFormValue();
    }


    createFaqFields(): FormGroup {
      return this.formBuilder.group({
        question: '',
        answer: ''
      });
    }

answered Sep 21, 2018 at 4:19

Yuvaranjani

3101 gold badge3 silver badges12 bronze badges

1 Comment

Anuj TBE Over a year ago

I tried it but still it says Error: "Must supply a value for form control at index: 0."

Anuj TBE · Accepted Answer · 2018-09-26 13:20:36Z

0

After trying all the answers and examples from different sources. This is how I solved it.

private _setFormValue() {
  if (this.product) {
    this.landingPageForm.setValue({
      title: this.product.info.title,
      description: '',
      faqs: [{
        question: '',
        answer: ''
      }],
    });
  }
}

Added question, answer with empty value as the first object to the faqs field.

answered Sep 26, 2018 at 13:20

Anuj TBE

9,92234 gold badges149 silver badges308 bronze badges

Comments

Ihor Khomiak · Accepted Answer · 2023-12-13 11:42:36Z

0

landingPageForm.controls.faqs.clear();

answered Dec 13, 2023 at 11:42

Ihor Khomiak

1,18912 silver badges17 bronze badges

Collectives™ on Stack Overflow

Angular 6: Set empty form array field

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related