How to push to a FormArray([ ]) in angular 4
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
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 to 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:
