i'm trying to create my first Angular 2 application. And as usual i'm instantly in trouble with the model I wanna create. I have a model for creating a parent-child relation between artilces. For example: I wanna add an article to my basket with some child objects as follows:
IArticle[] = [
{
id: 1,
parentArticle: 1234596,
description: 'some description for parent'
children: [
{
id: 1,
childArticle: 123457,
childDescription: 'some description for first child'
},
{
id: 2,
childArticle: 123467,
childDescription: 'some description for second child'
},
.....
]
In typescript I defined an interface for my Article. The child objects have their own interface which is slightly different.
Because these child objects are a small fixed set I wanna add these children using a dropdownlist. I want these objects to display as buttons with a removal when clicked (optional with modal popup with "are you sure" question). So I thought the button beside the dropdownlist should add the dropdownlist value to the array. This works fine when I added the values to a normal typed array. But now I wanna wrap this array in a "Reactive Form".
Can someone help me how to work with arrays in these Reactive Forms and how to wrap them in a formcontrol object. I looked at the FormArray "control" but am not sure is this is what i'm searching for. It seams an array of FormControls, not an array of data. Maybe Reactive Forms is not the right decision? Hopefully someone can put me on the right track.
My html template is as follows (bootstrap code stripped from the code)
<form autocomplete="off">
<input type="text" Placeholder="Article Number" />
<div >
<button *ngFor="let child of children">
<span class="glyphicon glyphicon-remove-circle text-danger"></span>
{{ child.childArticle }}
</button>
</div>
<div >
<select class="form-control inline">
<option value="">Select Service..</option>
<option *ngFor="let serviceOption of serviceOptions" [ngValue]="serviceOption.serviceNumber">
{{serviceOption.serviceDescription}}
</option>
</select>
<button (click)="onAddService()">
Add
</button>
</div>
<div>
<button type="submit">
Save
</button>
</div>
</form>
Kind Regards.
------ typescript code:
export class NewServiceComponent implements OnInit {
newServiceForm: FormGroup;
serviceOptions: IServiceArticle[] = [
{ 'id': 1, 'serviceNumber': 123456, serviceDescription: 'description 1' },
{ 'id': 2, 'serviceNumber': 456789, serviceDescription: 'description 2' },
{ 'id': 3, 'serviceNumber': 123456, serviceDescription: 'description 3' },
];
selectedServiceOption: IServiceArticle;
newArticle: IService;
constructor(private _fb: FormBuilder) {
}
createForm() {
this.newServiceForm = this._fb.group({
services: this._fb.array([]),
articleNumber: this._fb.control(null, Validators.required),
})
}
ngOnInit() {
this.createForm();
}
onAddService() {
const arrayControl = <FormArray>this.newServiceForm.controls['services'];
let newgroup = this._fb.group({
serviceNumber: this.selectedServiceOption.serviceNumber,
serviceDescription: this.selectedServiceOption.serviceDescription,
})
arrayControl.push(newgroup);
}
}
select
, this could mean that the user could choose the same value over and over? – AT82