I would like to pass in an attribute from an api call to a submit function and not sure why it isn't working. I am thinking it has something to do with an option select or reformatting the input.
Experiencing the error Error: No value accessor for form control with name: 'employee_id'
form.component.html
<select>
<option
*ngFor="let employee of employees"
name="employee_id"
[(ngModel)]="employee_id">
{{ employee.name }}
</option>
</select>
<button
(click)="submitMeetingRequirements()"
class="btn btn-success">
Suggest Meeting
</button>
and this is the submit function from form.component.ts
submitMeetingRequirements() {
this._meetingService.submitMeetingRequirements(
this.employee_id)
.subscribe(res => this.suggestions = res["suggestions"])
}
Fixed with
<select [(ngModel)]="employee_id" name="employee_id">
<option
*ngFor="let employee of employees"
value="{{employee.id}}">
{{ employee.name }}
</option>
</select>
Use the [(ngModel)] on the select tag and not the option tag. Something like this:
<select [(ngModel)]="employee_id">
<option
*ngFor="let employee of employees"
name="employee_id" >
{{ employee.name }}
</option>
</select>
<button
(click)="submitMeetingRequirements()"
class="btn btn-success">
Suggest Meeting
</button>
Here's a Working Sample StackBlitz for your ref.
Related
I tried many things but didnt work.
how can i set first option of the data comes from Api. It chooses last option
<div class="form-group" [hidden]="!hideItem">
<p></p>
<select
class="form-select"
type="option"
id="optionFour"
formControlName="optionFour"
>
<option *ngFor="let option of lvlThreeOptions" [value]="option.id"
[selected]="lvlThreeOptions[0]">
{{ option.name }}
</option>
</select>
</div>
<div class="form-group" *ngIf="lvlThreeOptions?.length > 0">
<p></p>
<select
[(ngModel)]="selectedLvlThree"
class="form-select"
type="option"
id="optionFour"
formControlName="optionFour"
>
<option *ngFor="let option of lvlThreeOptions" [value]="option.id">
{{ option.name }}
</option>
</select>
</div>
option.component.html
this.optionService
.getOptionsById(this.selectedLvlTwo, 1)
.subscribe((response) => {
this.lvlThreeOptions = response.data;
console.log(this.lvlThreeOptions);
this.selectedLvlThree = this.lvlThreeOptions[0].id;
});
option.component.ts
that solved my problem
I tried to get value of input tag but I always receive name of asset. Anyone can help me? Thanks very much.
<select class="form-control" [(ngModel)]=id name="assetID">
<option *ngFor="let asset of arrAssets" selected>
<input type="hidden" value="{{ asset.Id }}" name="id">
{{ asset.Name }}
</option>
</select>
You can do it by using (input) on your <input> element like:
<select class="form-control" [(ngModel)]=id name="assetID">
<option *ngFor="let asset of arrAssets; let i = index;" selected>
<input type="hidden" (input)="inputChanged($event , i)" value="{{ asset.Id }}" name="id">
{{ asset.Name }}
</option>
</select>
I have add the i as index in case you want to detect each input on its own
Moving to .ts file
export class Home {
constructor(){}
inputChanged(eve, i) {
console.log(eve.target.value); // This should print the value of input element
console.log(i); // This should print the index of input element which has changed
}
}
I am using [(ngModel)] top bind various inputs and select elements in my angular application. I also use a service with ngModel. When using the select element, my app is showing an empty option.
Even if I change the value of the first option to something other than an empty string, the same issue comes up.
<div>
<input
placeholder="Ohio Volume"
type="number"
class="text-input"
value="{{ this.inputsService.ohioVolume }}"
[(ngModel)]="ohioVolume"
(change)="this.inputsService.setOhioVolume(ohioVolume)"
>
</div>
<div>
<select
class="select"
value="{{ this.inputsService.ohioReporter }}"
[(ngModel)]="ohioReporter"
(change)="this.inputsService.setOhioReporter(ohioReporter)">
<option value="">Ohio Reporter</option>
<option value="Ohio St.3d">Ohio St.3d</option>
<option value="Ohio St.2d">Ohio St.2d</option>
<option value="Ohio St.">Ohio St.</option>
</select>
</div>
My inputsService typescript file shows in relevant part:
ohioReporter: string
setOhioReporter(ohioReporter) {
this.ohioReporter = ohioReporter
}
The input code is working appropriately, but the select shows an empty box regardless of the value of the first option. I would prefer the solution to remain only in the html code and not require any typescript code.
Try with this in your ts/Service, maybe its because its not defined by default
ohioReporter: string = ""
you need to modify yout code in this way:
<select
class="select"
value="{{ this.inputsService.ohioReporter }}"
formControlName="name" [ngModel]="ohioReporter" name="ohioReporter" (ngModelChange)="ohioReporter($event)">
<option value="">Ohio Reporter</option>
<option value="Ohio St.3d">Ohio St.3d</option>
<option value="Ohio St.2d">Ohio St.2d</option>
<option value="Ohio St.">Ohio St.</option>
</select>
the .ts becames:
#Output() ohioReporter: number;
....
ohioReporter(ohioReporter) {
this.ohioReporter= ohioReporter;
}
I am using chrome 65 version there the dropdown ng-model works perfectly
but in the chrome 71 version the ng-model malfunctioning it's not set the option value in ng-model .
<select class="btn dropdown-toggle btn-info" ng-model="action" ng-click="disburseMenuEvent(action)">
<option data-icon="fa-glass icon-success" value=""> SELECT </option>
<option data-icon="fa-glass icon-success" ng-repeat="actn in Action" ng-value="{{actn.Id}}" >
{{actn.action}}</option>
</select>
You need to replace this:
...ng-value="{{actn.Id}}" >
with this:
...ng-value="actn.Id" >
Inside an ng-xxx attribute, the {{}} markup is not required.
You need to set value for each option. Then it'll apply to the "action" when it is selected.
<select name="state" ngModel>
<option value="" disabled>Choose a state</option>
<option *ngFor="let state of states" [ngValue]="state">
{{ state.abbrev }}
</option>
</select>
I have a select field that populates data as below. I populate data items as their names. My goal is to select data's name and their corresponded ids.
Here is my HTML template:
<select class="custom-select d-block w-100" id="test" [(ngModel)]="record.firstName" #firstName="ngModel" name="firstName">
<option value="">Choose...</option>
<option *ngFor="let item of items" value="{{ item.name}}">{{ item.name }}</option>
</select>
When I select an item from the dropdown, record.firstName is set to item.name as expected. I was wondering how can I also retrieve item.id when I select the same item. I couldn't find a resource or tutorials to fix this. Any help will be appreciated!
Instead of setting the option values to item.name, you can set them to the item objects with [ngValue]. That will allow you to access any property of the selected item. If necessary, you can handle the ngModelChange event to do additional processing.
<select [(ngModel)]="selectedItem" (ngModelChange)="processSelectedItem($event)" ...>
<option [ngValue]="undefined">Choose...</option>
<option *ngFor="let item of items" [ngValue]="item">{{ item.name }}</option>
</select>
As an example, you could set record to a modified version of the selected item with:
processSelectedItem(item) {
this.record.firstName = item.name;
this.record.item_id = item.id;
}
Alternatively, you could bind the options to item.id (I assume that the id is unique), and set the record.firstName in the ngModelChange event handler:
<select [(ngModel)]="record.item_id" (ngModelChange)="processSelectedItem($event)" ...>
<option value="-1">Choose...</option>
<option *ngFor="let item of items" [value]="item.id">{{ item.name }}</option>
</select>
with:
processSelectedItem(itemId) {
this.record.firstName = this.items.find(x => x.id === itemId).name;
}