Form Group - Select drop down not populating, yet array shows in console
Question
I've got a drop down within my form that for one reason or another just one populate with the data binding its been assigned. The data is coming through - I can output it to the console, but it just wont populate the select field.
The data is being provided by the loadOrganizations method, and the array outputs to my console when logged as seen here:
Any ideas on that I'm missing? I have re written this a dozen times over and 16 different ways to no avail.
register.component.ts
import { Component, Output, EventEmitter, OnInit } from '@angular/core';
import { AuthService } from '../../_services/auth.service';
import { AlertifyService } from '../../_services/alertify.service';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { Clients } from '../../_models/clients';
import { Router } from '@angular/router';
import { Organizations } from '../../_models/organizations';
import { OrganizationService } from '../../_services/Organization.service';
@Component({
selector: 'app-dashboard',
templateUrl: 'register.component.html',
})
export class RegisterComponent implements OnInit {
@Output() cancelRegister = new EventEmitter();
client: Clients;
organizations: Organizations;
registerClientForm: FormGroup;
registerOrgForm: FormGroup;
constructor(private authService: AuthService, private alertify: AlertifyService,
private fb: FormBuilder, private router: Router, private orgService: OrganizationService) { }
ngOnInit() {
this.loadOrganizations();
this.createClientForm();
this.createOrganizaionForm();
}
createClientForm() {
this.registerClientForm = this.fb.group({
FirstName: new FormControl('', Validators.required),
LastName: new FormControl('', Validators.required),
organization: new FormControl(),
PhoneNumber: new FormControl('', Validators.required),
Username: new FormControl('', Validators.required),
Password: new FormControl('', Validators.required),
ActiveDate: new FormControl(),
EndDate: new FormControl(),
});
}
loadOrganizations() {
this.orgService.getOrganizations().subscribe((organizations: Organizations[]) => {
organizations = organizations;
console.log(organizations);
}, error => {
this.alertify.error(error);
});
}
registerClient() {
if (this.registerClientForm.valid) {
this.client = Object.assign({}, this.registerClientForm.value);
this.authService.register(this.client).subscribe(() => {
this.alertify.success('Registration created successfully');
this.router.navigate(['/manage/clients']);
}, error => {
this.alertify.error(error);
});
}
}
createOrganizaionForm() {
this.registerOrgForm = this.fb.group({
OrganizationName: new FormControl('', Validators.required),
FirstName: new FormControl('', Validators.required),
LastName: new FormControl('', Validators.required),
PhoneNumber: new FormControl('', Validators.required),
StreetAddress: new FormControl('', Validators.required),
City: new FormControl('', Validators.required),
State: new FormControl('', Validators.required),
Country: new FormControl('', Validators.required),
PostalCode: new FormControl('', Validators.required),
});
}
registerOrganization() {
if (this.registerOrgForm.valid) {
this.organizations = Object.assign({}, this.registerOrgForm.value);
this.orgService.CreateOrganization(this.organizations).subscribe(() => {
this.alertify.success('Organization created successfully');
// this.router.navigate(['/manage/clients']);
}, error => {
this.alertify.error(error);
});
}
}
cancel() {
this.cancelRegister.emit(false);
console.log('cancelled');
}
}
full register.component.html
<div class="row">
<div class="col-md-12">
<div class="card card-user">
<tabset>
<!-- BEGIN ORGANIZATION TAB -->
<tab heading="Organization">
<div class="card-header">
<h5 class="card-title">Register New Client</h5>
</div>
<div class="card-body">
<form
[formGroup]="registerOrgForm"
(ngSubmit)="registerOrganization()"
enctype="multipart/form-data"
>
<div class="row">
<div class="col-md-3 px-1">
<div class="form-group">
<label>Organization</label>
<input
type="text"
[ngClass]="{
'is-invalid':
registerOrgForm.get('OrganizationName').errors &&
registerOrgForm.get('OrganizationName').touched
}"
class="form-control"
formControlName="OrganizationName"
placeholder="Complete Security Ltd."
/>
<div class="invalid-feedback">
Please enter the organization name
</div>
</div>
</div>
<div class="col-md-3 px-1">
<div class="form-group">
<label>Contact First Name</label>
<input
type="text"
[ngClass]="{
'is-invalid':
registerOrgForm.get('FirstName').errors &&
registerOrgForm.get('FirstName').touched
}"
formControlName="FirstName"
class="form-control"
placeholder="John"
/>
<div class="invalid-feedback">
Please enter a contact first name
</div>
</div>
</div>
<div class="col-md-3 px-1">
<div class="form-group">
<label for="text">Contact Last Name</label>
<input
type="text"
[ngClass]="{
'is-invalid':
registerOrgForm.get('LastName').errors &&
registerOrgForm.get('LastName').touched
}"
formControlName="LastName"
class="form-control"
placeholder="Smith"
/>
<div class="invalid-feedback">
Please enter a contact last name
</div>
</div>
</div>
<div class="col-md-3 px-1">
<div class="form-group">
<label>Phone Number</label>
<input
type="text"
[ngClass]="{
'is-invalid':
registerOrgForm.get('PhoneNumber').errors &&
registerOrgForm.get('PhoneNumber').touched
}"
formControlName="PhoneNumber"
class="form-control"
placeholder="604-929-3929"
/>
<div class="invalid-feedback">
Please enter a phone number
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 px-1">
<div class="form-group">
<label>Street Address</label>
<input
type="text"
[ngClass]="{
'is-invalid':
registerOrgForm.get('StreetAddress').errors &&
registerOrgForm.get('StreetAddress').touched
}"
formControlName="StreetAddress"
class="form-control"
placeholder="123 Main St"
/>
<div class="invalid-feedback">
Please enter a street address
</div>
</div>
</div>
<div class="col-md-6 px-1">
<div class="form-group">
<label>City</label>
<input
type="text"
[ngClass]="{
'is-invalid':
registerOrgForm.get('City').errors &&
registerOrgForm.get('City').touched
}"
formControlName="City"
class="form-control"
placeholder="North Vanouver"
/>
<div class="invalid-feedback">Please enter a city</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 px-1">
<div class="form-group">
<label>State</label>
<input
type="text"
[ngClass]="{
'is-invalid':
registerOrgForm.get('State').errors &&
registerOrgForm.get('State').touched
}"
formControlName="State"
class="form-control"
placeholder="BC"
/>
<div class="invalid-feedback">Please enter a state</div>
</div>
</div>
<div class="col-md-4 px-1">
<div class="form-group">
<label>Country</label>
<input
type="text"
[ngClass]="{
'is-invalid':
registerOrgForm.get('Country').errors &&
registerOrgForm.get('Country').touched
}"
formControlName="Country"
class="form-control"
placeholder="Canada"
/>
<div class="invalid-feedback">Please enter a country</div>
</div>
</div>
<div class="col-md-4 px-1">
<div class="form-group">
<label>Postal Code</label>
<input
type="text"
[ngClass]="{
'is-invalid':
registerOrgForm.get('PostalCode').errors &&
registerOrgForm.get('PostalCode').touched
}"
formControlName="PostalCode"
class="form-control"
placeholder="V7H 1S6"
/>
<div class="invalid-feedback">
Please enter a postal code
</div>
</div>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-sm btn-primary">
<i class="fa fa-dot-circle-o"></i> Submit
</button>
<button
type="reset"
class="btn btn-sm btn-danger"
(click)="cancel()"
>
<i class="fa fa-ban"></i> Cancel
</button>
</div>
</form>
</div>
</tab>
<!-- END ORGANIZATION TAB -->
<!-- BGIN CLIENT TAB -->
<tab heading="Client">
<div class="card-header">
<h5 class="card-title">Register New Client</h5>
</div>
<div class="card-body">
<form
[formGroup]="registerClientForm"
(ngSubmit)="registerClient()"
enctype="multipart/form-data"
>
<div class="row">
<div class="col-md-4 px-1">
<div class="form-group">
<label>Contact First Name</label>
<input
type="text"
[ngClass]="{
'is-invalid':
registerClientForm.get('FirstName').errors &&
registerClientForm.get('FirstName').touched
}"
formControlName="FirstName"
class="form-control"
placeholder="John"
/>
<div class="invalid-feedback">
Please enter a contact first name
</div>
</div>
</div>
<div class="col-md-4 px-1">
<div class="form-group">
<label for="text">Contact Last Name</label>
<input
type="text"
[ngClass]="{
'is-invalid':
registerClientForm.get('LastName').errors &&
registerClientForm.get('LastName').touched
}"
formControlName="LastName"
class="form-control"
placeholder="Smith"
/>
<div class="invalid-feedback">
Please enter a contact last name
</div>
</div>
</div>
<div class="col-md-4 px-1">
<div class="form-group">
<label>Organization</label>
<select
id="OrganizationName"
class="form-control"
formControlName="organization">
<option
*ngFor="let organization of organizations"
[value]="organization.id">
{{ organization.organizationName }}
</option>
</select>
<div class="invalid-feedback">
Please select the organization this user will belong to
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 px-1">
<div class="form-group">
<label>Phone Number</label>
<input
type="text"
[ngClass]="{
'is-invalid':
registerClientForm.get('PhoneNumber').errors &&
registerClientForm.get('PhoneNumber').touched
}"
formControlName="PhoneNumber"
class="form-control"
placeholder="604-929-3929"
/>
<div class="invalid-feedback">
Please enter a phone number
</div>
</div>
</div>
<div class="col-md-4 px-1">
<div class="form-group">
<label>Email Address (Username)</label>
<input
type="text"
[ngClass]="{
'is-invalid':
registerClientForm.get('Username').errors &&
registerClientForm.get('Username').touched
}"
formControlName="Username"
class="form-control"
placeholder="user@email.com"
/>
<div class="invalid-feedback">
Please enter the users email address
</div>
</div>
</div>
<div class="col-md-4 px-1">
<div class="form-group">
<label>Temporary Password</label>
<input
type="password"
[ngClass]="{
'is-invalid':
registerClientForm.get('Password').errors &&
registerClientForm.get('Password').touched
}"
formControlName="Password"
class="form-control"
placeholder="Password"
autocomplete="Create Password"
/>
<div class="invalid-feedback">Please enter a password</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 px-1">
<div class="form-group">
<label>Start Date</label>
<input
formControlName="ActiveDate"
type="date"
class="form-control"
/>
</div>
</div>
<div class="col-md-6 px-1">
<div class="form-group">
<label>End Date</label>
<input
formControlName="EndDate"
type="date"
class="form-control"
/>
</div>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-sm btn-primary">
<i class="fa fa-dot-circle-o"></i> Submit
</button>
<button
type="reset"
class="btn btn-sm btn-danger"
(click)="cancel()"
>
<i class="fa fa-ban"></i> Cancel
</button>
</div>
</form>
</div>
</tab>
<!-- END CLIENT TAB -->
</tabset>
</div>
</div>
</div>
applicable section of register.componenet.html
<div class="col-md-4 px-1">
<div class="form-group">
<label>Organization</label>
<select
id="OrganizationName"
class="form-control"
formControlName="organization">
<option
*ngFor="let organization of organizations"
[value]="organization.id">
{{ organizations.organizationName }}
</option>
</select>
<div class="invalid-feedback">
Please select the organization this user will belong to
</div>
</div>
</div>
2 answers
solution1
1 ACCPTED 2020-01-09 07:30:16
You have an issue in following part:
loadOrganizations() {
this.orgService.getOrganizations().subscribe((organizations: Organizations[]) => {
**organizations = organizations;**
console.log(organizations);
}, error => {
this.alertify.error(error);
});
}
Declare first of all organizationsData: Organizations[]; Then, Instead of assigning in same variable try to use another variable like this.organizationsData = organizations;
Use this variable (organizationsData) in ngFor. That may fix your issue.
solution2
0 2020-01-09 07:13:26
Change:
organizations: Organizations;toorganizations: Organizations[];{{ organizations.organizationName }}to{{ organization.organizationName }}
Try like this:
<option *ngFor="let organization of organizations" [value]="organization.id">
{{ organization.organizationName }}
</option>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Select-UI not populating drop down
ng-options not populating select options drop down
Bug in angular form drop down select box
Validation of Form in drop down (<select> tag) in Angular JS
Specify Angular Schema Form Select drop down options using scope
Why isnt this drop down populating with working links?
Multi selection drop down in angular not populating
ui-select show array elements as choices in drop down
How to reflect the current value in a drop-down field after populating options in a select control(ng-options) in AngularJS?
AngularJS with a styled select drop down
Related Tags