0

I have a formgroup name studentRegistrationForm. In this form i want to create dynamically studentList array but i can not done this. 

ngOnInit(){
 this.studentRegistrationForm = this.formBuilder.group({
      session: ['', [Validators.required]],
      semester: ['', [Validators.required]],
      students: ['',[Validators.required]],
      studentList: this.formBuilder.array([
      ]),
    });

    let control = <FormArray>this.studentRegistrationForm.controls['studentList'];


    this.studentRegistrationForm.valueChanges
      .subscribe( data => {
        if(data.semester  && data.session && data.students){
          control.push(this.createStudent());
        }

      });
}

  createStudent() {
    return new FormGroup({
      id: new FormControl('', Validators.required),
      email: new FormControl('',Validators.required)
    })
  }

here is my error picture

Improve this question
3
  • It is most likely because you are modifying the form (the studentList form control is in the form) every time a value in the form changes... which triggers another form change... etc. Commented May 11, 2018 at 19:37
  • Actually I give a condition which is execute at a certain value .. so is it call inside for everytime Commented May 11, 2018 at 19:42
  • If you have a suggestion plz give answer how I can achieve this with example Commented May 11, 2018 at 19:43

1 Answer 1

Reset to default
3

As noted in the comments, your issue is that you're subscribing to form changes, which then adds more data to the form, which triggers form changes, and so on until you reach the stack limit.

Without further context to what your use case, my suggestion would be to remove the subscription to form changes and instead add a button for adding a new student to the list, which you can disable unless the current form is valid (similar to the logic that you already have in place):

<div formArrayName="studentList" class="well well-lg">
    <div *ngFor="let student of students.controls; let i=index" [formGroupName]="i">
        <label for="id">ID:</label><input formControlName="id">
        <label for="id">EMail:</label><input formControlName="email">
    </div>
    <button type="button" (click)="doCreateStudent()" [disabled]="!studentRegistrationForm.valid">Add Student</button>
</div>

As you have validators defined for semester, session and students fields already, you can just use studentRegistrationForm.valid to test validity before allowing a new student to be added.

Here's a minimal stackblitz demonstrating your code working without the error:

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

3 Comments

actually i need dynamically create student . depends of number of students. if input is 4 then 4 array elements are create .
Ok, next time add this requirement to your question. Updated the Stackblitz to show how you can do this with a button - you can subscribe to valueChanges on the students field if you want, but that might frustrate IMO
stackoverflow.com/questions/48396222/… please check this @chrisWhite

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.