angular => issue with form with material table inside

Question

In angular 7, I am trying to develop a page where i will be showing data in table format , and also want to give user access to edit, add and delete. I am facing problem in adding formarray to the formgroup. On console i am getting below error,

ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

I have added formgroup but it is not showing as per expectation. I also created stackblitz for issue.

Thanks in advance.

score 2 · Answer 1 · answered Jan 30 '20 at 09:49

2

You need to inject FormBuilder as a dependency,

Instead of private fb: FormBuilder;

Add it to the constructor as follows:

constructor(private fb: FormBuilder) { }

Slackblitz

Documentation

answered Jan 30 '20 at 09:49

Akshay Rana

1,455
11
20

Thanks @Akshay. It worked for inputs but still showing error for table format. – usersam Jan 30 '20 at 09:56
Adding MatInputModule to module fixes that. https://stackoverflow.com/questions/46705101/mat-form-field-must-contain-a-matformfieldcontrol – Akshay Rana Jan 30 '20 at 10:00
Please accept the answer if it resolved your question. :) – Akshay Rana Jan 30 '20 at 10:02

score 0 · Answer 2 · answered Jan 30 '20 at 09:52

Maybe you forgot to initialize FormGroup on ngOnInit:

this.UserForm = new FormGroup({
       firstName: new FormControl()
    });

Firstname is only an example, there you need to define your fromControls, just like this:

  ngOnInit() {    
      this.getdata();

      this.UserForm = new FormGroup({
        page: new FormControl(),
        per_page: new FormControl(),
        total: new FormControl(),
        total_pages: new FormControl(),       
        UserArray: this.fb.array([])
        });    
  }

angular => issue with form with material table inside

2 Answers2