如何以角度 4 推送到 FormArray([ ])

Question

I have a reactive angular form that looks something like this.

 <form [formGroup]="myForm">
      <div *ngFor="let Repo of Repos;">
           <fieldset>
                <legend>{{Repo.name}}</legend>
                    <div class="checkbox checkbox-success">
                       <input
                            [id] = "Repo.id"
                            type="checkbox"   (change)="onChange(Repo.User,Repo.Commits,Repo.Requests,Repo.Contributors, Repo.Languages,Repo.Branches,Repo.Langs,$event.target.checked)">
                              <label [for] = "Repo.id">
                                 Select This Repository
                              </label>
                     </div>
            </fieldset>
       </div>
 </form>

Following is the typescript file:

export class AddUserComponent implements OnInit {
      githubUserResponse;
      githubReposResponse;
      myForm = new FormGroup({});
    ngOnInit(){
       this.myForm = new FormGroup({
            'userRepoData' : new FormGroup({
              'githubusers': new FormGroup({
                'username': new FormControl(null),
                'html_url': new FormControl(null),
                'name': new FormControl(null),
                'company': new FormControl(null),
                'location': new FormControl(null),
                'user_created_at': new FormControl(null),
                'user_updated_at': new FormControl(null),
                'public_repos': new FormControl(null),
                'public_gists': new FormControl(null),
                'githubrepos': new FormArray([]),
              }),
            }),
          });
    }
onChange(repo, commits, requests, contributors, branches, langs,  isChecked: boolean){
        if (!isChecked) {
         console.log('aayaa');
         (<FormArray>this.myForm.get('userRepoData.githubusers.githubrepos')).push(
           new FormGroup({
             'owner': new FormControl(repo.owner.login),
             'name': new FormControl(repo.name),
             'html_url': new FormControl(repo.html_url),
             'clone_url': new FormControl(repo.clone_url),
             'repo_created_at': new FormControl(repo.created_at),
             'repo_updated_at': new FormControl(repo.updated_at),
             'repo_pushed_at': new FormControl(repo.pushed_at),
             'public_repos': new FormControl(repo.public_repos),
             'no_of_commits': new FormControl(commits.length),
             'no_of_branches': new FormControl(branches.length),
             'no_of_pullrequests': new FormControl(requests.length),
             'no_of_contributors': new FormControl(contributors.length),
             'repobranches': new FormArray([]), //empty
             'repocommits': new FormArray([]), //empty
             'repocontributors': new FormArray([]), //empty
             'repolangs': new FormArray([]), //empty
             'repo_p_rs': new FormArray([]) //empty
           })
         );
         console.log(this.myForm.value);
  }
}

it can be seen in above FormGroup that the FormArrays :
1. repobranches
2. repocommits
3. repocontributors
4. repolang
5. repo_pr_s
are empty. now i want to push some arrays within these nested FormArrays.

for example following is the array i want to push to 'repocontributors' :

[
                    {
                        "login": "Saurabh0606",
                        "id": 21239899,
                        "avatar_url": "https://avatars2.githubusercontent.com/u/21239899?v=4",
                        "gravatar_id": "",
                        "url": "https://api.github.com/users/Saurabh0606",
                        "html_url": "https://github.com/Saurabh0606",
                        "followers_url": "https://api.github.com/users/Saurabh0707/followers",
                        "following_url": "https://api.github.com/users/Saurabh0707/following{/other_user}",
                        "gists_url": "https://api.github.com/users/Saurabh0707/gists{/gist_id}",
                        "starred_url": "https://api.github.com/users/Saurabh0707/starred{/owner}{/repo}",
                        "subscriptions_url": "https://api.github.com/users/Saurabh0707/subscriptions",
                        "organizations_url": "https://api.github.com/users/Saurabh0707/orgs",
                        "repos_url": "https://api.github.com/users/Saurabh0707/repos",
                        "events_url": "https://api.github.com/users/Saurabh0707/events{/privacy}",
                        "received_events_url": "https://api.github.com/users/Saurabh0707/received_events",
                        "type": "User",
                        "site_admin": false,
                        "contributions": 2
                    }


{
                            "login": "Saurabh0707",
                            "id": 21239898,
                            "avatar_url": "https://avatars2.githubusercontent.com/u/21239898?v=4",
                            "gravatar_id": "",
                            "url": "https://api.github.com/users/Saurabh0707",
                            "html_url": "https://github.com/Saurabh0707",
                            "followers_url": "https://api.github.com/users/Saurabh0707/followers",
                            "following_url": "https://api.github.com/users/Saurabh0707/following{/other_user}",
                            "gists_url": "https://api.github.com/users/Saurabh0707/gists{/gist_id}",
                            "starred_url": "https://api.github.com/users/Saurabh0707/starred{/owner}{/repo}",
                            "subscriptions_url": "https://api.github.com/users/Saurabh0707/subscriptions",
                            "organizations_url": "https://api.github.com/users/Saurabh0707/orgs",
                            "repos_url": "https://api.github.com/users/Saurabh0707/repos",
                            "events_url": "https://api.github.com/users/Saurabh0707/events{/privacy}",
                            "received_events_url": "https://api.github.com/users/Saurabh0707/received_events",
                        "type": "User",
                        "site_admin": false,
                        "contributions": 2
                    }
                ]   

similarly others also.

how am i supposed to do this..?
Help Required.
Thanks In Advance.

Answer 1

As Imran mentioned I also recommend to use FormBuilder :

ngOnInit() {
  this.myForm = this._fb.group({
    userRepoData: this._fb.group({
      githubusers: this._fb.group({
        username: null,
        html_url: null,
        name: null,
        company: null,
        location: null,
        user_created_at: null,
        user_updated_at: null,
        public_repos: null,
        public_gists: null,
        githubrepos: this._fb.array([
          this._fb.group({
            owner: 'repo.owner.login',
            name: 'repo.name',
            html_url: 'repo.html_url',
            clone_url: 'repo.clone_url',
            repo_created_at: 'repo.created_at',
            repo_updated_at: 'repo.updated_at',
            repo_pushed_at: 'repo.pushed_at',
            repocontributors: this._fb.array([]), //empty
            repolangs: this._fb.array([]), //empty
          })
        ]),
      })
    })
  });
}

then just use push() method to push to your array:

pushToArray() {
  const repocontributors = this.myForm.get('userRepoData.githubusers.githubrepos.0.repocontributors');
  (repocontributors as FormArray).push(this._fb.group({
    login: "Saurabh0606",
    id: 21239899,
    avatar_url: "https://avatars2.githubusercontent.com/u/21239899?v=4",
    gravatar_id: "",
    url: "https://api.github.com/users/Saurabh0606",
    html_url: "https://github.com/Saurabh0606",
    followers_url: "https://api.github.com/users/Saurabh0707/followers",
    following_url: "https://api.github.com/users/Saurabh0707/following{/other_user}",
    gists_url: "https://api.github.com/users/Saurabh0707/gists{/gist_id}",
    starred_url: "https://api.github.com/users/Saurabh0707/starred{/owner}{/repo}",
    subscriptions_url: "https://api.github.com/users/Saurabh0707/subscriptions",
    organizations_url: "https://api.github.com/users/Saurabh0707/orgs",
    repos_url: "https://api.github.com/users/Saurabh0707/repos",
    events_url: "https://api.github.com/users/Saurabh0707/events{/privacy}",
    received_events_url: "https://api.github.com/users/Saurabh0707/received_events",
    type: "User",
    site_admin: false,
    contributions: 2
  }));

  (repocontributors as FormArray).push(this._fb.group({
    login: "Saurabh0707",
    id: 21239898,
    avatar_url: "https://avatars2.githubusercontent.com/u/21239898?v=4",
    gravatar_id: "",
    url: "https://api.github.com/users/Saurabh0707",
    html_url: "https://github.com/Saurabh0707",
    followers_url: "https://api.github.com/users/Saurabh0707/followers",
    following_url: "https://api.github.com/users/Saurabh0707/following{/other_user}",
    gists_url: "https://api.github.com/users/Saurabh0707/gists{/gist_id}",
    starred_url: "https://api.github.com/users/Saurabh0707/starred{/owner}{/repo}",
    subscriptions_url: "https://api.github.com/users/Saurabh0707/subscriptions",
    organizations_url: "https://api.github.com/users/Saurabh0707/orgs",
    repos_url: "https://api.github.com/users/Saurabh0707/repos",
    events_url: "https://api.github.com/users/Saurabh0707/events{/privacy}",
    received_events_url: "https://api.github.com/users/Saurabh0707/received_events",
    type: "User",
    site_admin: false,
    contributions: 2
  }));
}

STACKBLITZ: https://stackblitz.com/edit/angular-ntx3sp?file=app%2Fapp.component.ts

Just press PUSH TO FORM ARRAY BUTTON .

This is how it looks before pushing:

and here after:

Answer 2

Create your form builder first then set your existing array value in your repocontributors key just like

this.userForm = this._formBuilder.group({
   ...................
   ................
  'repocontributors': [yourArray]
});

Here is an example to build form builder in reactive form. Don't use on onChange() use submit please

Answer 3

githubrepos is an array, so get control for an element in that array. Then get control to repobranches (lets assume index 0), and push a new FormGroup with whatever values you want (assuming variable.login is a value here)

  var githubReposCtrl = (<FormArray>this.myForm.get('userRepoData.githubusers.githubrepos')).at(0);
  var repobranches = <FormArray>githubReposCtrl.get('repobranches');

  repobranches.push(new FormGroup(
    "login": new FormControl(variable.login);
    ...
  ))