I am currently working on a dynamic Angular form that displays 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>
Below is the TypeScript file provided:
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);
}
}
In the above FormGroup, there are empty FormArrays:
1. repobranches
2. repocommits
3. repocontributors
4. repolang
5. repo_pr_s
that I need to populate with data.
For example, here's an array I want to push to 'repocontributors':
[
{
"login": "Saurabh0606",
"id": 21239899,
"avatar_url": "https://avatars2.githubusercontent.com/u/21239899?v=4",
...
},
{
"login": "Saurabh0707",
"id": 21239898,
"avatar_url": "https://avatars2.githubusercontent.com/u/21239898?v=4",
...
}
]
Please guide me on how I can achieve this for other FormArrays as well.
Any help will be greatly appreciated. Thank you in advance.