I am looking to create an object for a location that includes two parameters. While I can easily create an array of strings using FormGroup, I am unsure of how to create an object with two parameters nested inside it. Below is the code snippet I currently have:
bucketForm: FormGroup; // declared at the top of the class component
ngOnInit() {
this.initForm();
}
private initForm() {
let bucketName = '';
let bucketLocation = {};
let bucketObjects = new FormArray([]);
this.bucketForm = new FormGroup({
'name': new FormControl(bucketName, Validators.required),
'location': // Here I want to create a Location Object with two parameters {id: 'Some random number', name: 'New York'},
'bucketObjects': bucketObjects
});
console.log(this.bucketForm);
}
To capture input values from the .html file of the component, I have a simple form setup below:
<form [formGroup]="bucketForm" (ngSubmit)="onSubmit()">
<div class="row">
<div class="col-md-6">
<label for="name">Bucket Name*</label>
<input
type="text"
class="form-control"
id="name"
formControlName="name">
</div>
<div class="col-md-6">
<label for="bucketLocation">Bucket Location*</label>
<select
class="custom-select d-block w-100"
id="bucketLocation"
formControlName="location">
<option
*ngFor="let locationEl of locations" [value]="locationEl.name">{{ locationEl.name }}
</option>
</select>
</div>
</div>
<hr>
<button
type="submit"
class="btn btn-primary"
[disabled]="!bucketForm.valid">Create Bucket
</button>
<button class="btn btn-danger">Cancel</button>
</form>
This is my current bucket model structure which includes an array of buckets:
Bucket {
id: "BucketExample", // string
name: "BucketExample", // string
location: Location, // object { id: string, name: string }
bucketObjects: Array(0)
}
Screenshot for reference: