angular - 如何以 Angular 4 推送到 FormArray([ ])

Question

我有一个看起来像这样的响应式(Reactive) Angular 形式。

 <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>

typescript 文件如下:

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);
  }
}

在上面的 FormGroup 中可以看出 FormArrays :
1. 重新分支
2. repocommits
3. repo 贡献者
4. 回复
5. repo_pr_s
是空的。现在我想在这些嵌套的 FormArrays 中推送一些数组。

例如，以下是我要推送到“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
                    }
                ]   

其他人也类似。

我应该怎么做...？
需要帮助。
提前致谢。

Answer 1

正如 Imran 提到的，我还建议使用 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
          })
        ]),
      })
    })
  });
}

然后只需使用 push() 方法推送到您的数组:

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

只需按 PUSH TO FORM ARRAY BUTTON。

这是推送前的样子:

之后: