Generally i have an object of objects -> filteredDrivers.
Single object looks like this:
DRIVER_ID: 99
DRIVER_NAME: "JOHN SNOW"
which i'm using in md-autocomplete:
<md-input-container>
<input type="text"
name="driver"
mdInput
[mdAutocomplete]="auto"
placeholder="Driver"
ngModel
>
</md-input-container>
<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let driver of filteredDrivers| async" [value]="driver"
ngDefaultControl>
{{ driver.DRIVER_NAME}}
</md-option>
</md-autocomplete>
And i want to pass whole object by submitting a form but in input i want to view just driver.DRIVER_NAME.
If i pass whole driver like [value]="driver" in input i see [object Object]
and form submit gives me full object
but when i go with [value]="driver.DRIVER_NAME" i can see what i want - JOHN SNOW but form submit gives me only driver.DRIVER_NAME
How can i pass whole object by submitting the form and see only driver.DRIVER_NAME property in input?
It's clearly documented in the Angular Material docs for
Autocomplete.
Specifically:
Setting separate control and display values
If you want the option's control value (what is saved in the form) to
be different than the option's display value (what is displayed in the
actual text field), you'll need to set the displayWith property on
your autocomplete element. A common use case for this might be if you
want to save your data as an object, but display just one of the
option's string properties.
To make this work, create a function on your component class that maps
the control value to the desired display value. Then bind it to the
autocomplete's displayWith property.
<md-input-container>
<input type="text" mdInput [formControl]="myControl" [mdAutocomplete]="auto">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn">
<md-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option.name }}
</md-option>
</md-autocomplete>
Related
<input
#autoInput
type="text"
aria-label="Number"
matInput
[matAutocomplete]="auto"
[formControlName]="field.model"
[id]="field.model"
/>
<mat-autocomplete
#auto="matAutocomplete"
(optionSelected)="onUpdate(field)"
[displayWith]="displayFn"
>
<mat-option
*ngFor="
let option of getFiltered(
options[field.model],
autoInput
)
"
[value]="option.value || option"
>
{{ option?.label || option }}
</mat-option>
</mat-autocomplete>
My requirement was to show the selected label in the Input Box and get the Selected value to the .ts file. but if I selected anything from the option instead of the label its 'value' is displaying on the autocomplete input box. passing by entire object by '[value]="option"' '[displayWith]="displayFn"' I can solve the Displaying issue but on .ts file the entire object is receiving. I dont need that. in .ts file 'option.value' must reach. how can I solve the issue
I want to get the formControllerName and its value when focusout event happens on the below Angular input field. I have a Form with huge number of input fields like the below example. So, I want to do some operations on all input fields with respect to the Form controller. So, I want to try something like
(focusout)="passdataFunction(formControlName , formControlName.value)"
<mat-form-field appearance="outline">
<mat-label>Designation<span class="redColor">*</span></mat-label>
<input matInput formControlName="Delegate_designation" id="Delegate_designation" #Delegate_designationValue placeholder="Designation in the Company">
</mat-form-field>
Use your FormGroup (that you must have somewhere):
(focusout)="passdataFunction(formGroup.get('formControlName'))"
This will give you the AbstractControl.
I am using Angular material autocomplete and I am trying to select value using #Input and form control. Almost everything is working fine. I am setting value using input like this:
#Input() set startingPointValue(value) {
this.control.setValue(value, { emitEvent: false });
this.resizeInput();
}
And the value of the input is properly set but when I open autocomplete, an option which should be selected don't have mat-selected class so basically there is no indication which option was selected and this is confusing. When I click same option again class is added.
Is there a way to do that using setValue or I need to use something else?
This is my autocomplete HTML:
<mat-form-field class="starting-point-filter-container">
<mat-label>{{ label }}</mat-label>
<input
id="inputStartingPoint"
#startingPointInput
matInput
placeholder="Type to filter results"
type="text"
[formControl]="control"
[matAutocomplete]="startingPointAutocomplete"
spellcheck="false"
/>
<mat-icon class="starting-point-icon--dropdown">arrow_drop_down</mat-icon>
</mat-form-field>
<mat-autocomplete
#startingPointAutocomplete="matAutocomplete"
[displayWith]="displayName"
(opened)="scrollToSelected()"
>
<perfect-scrollbar class="select-scrollbar" [config]="scrollBarConfig" #scrollFilterContainer>
<mat-optgroup
*ngFor="let group of groups"
[label]="group.name"
[class.mat-optgroup-no-label]="!group.name"
class="starting-point-group-container"
#scrollToContainer
>
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option.id }}
</mat-option>
</mat-optgroup>
</perfect-scrollbar>
</mat-autocomplete>
Any help will be appreciated
Edit:
I created StackBlitz with autocomplete: https://stackblitz.com/edit/angular-ivy-mqwwky. You can inspect option number 2 after init. There is no class .mat-selected on it. You need to click it manually to set it properly. Question is how to do that during init?
I have this markup:
<md-input-container class="md-block" flex-gt-sm>
<label>Language</label>
<md-select name="languageAndLocale" ng-model="$ctrl.voice.languageAndLocale" required>
<md-option ng-value="language2" ng-repeat="language2 in $ctrl.languagesAndLocales">
{{language2}}
</md-option>
</md-select>
</md-input-container>
and in my component i try to insert value to this field.
self.voice.languageAndLocale = "eng";
$scope.voiceForm.languageAndLocale = "eng";
How can I trigger autocomplete if I want to add just a prefix via code?
say the drop down contains eng:en and I set the field via code to be eng so I want it to be auto completed to eng:en as would have happened if i insert eng in the UI and no via code.
Today I faced a situation with angularJS.
Hi have a recipe website, and to list the ingredients and theyr respective dosage I'm using angular's ng-repeat (here goes the snippet).
<div ng-repeat="food in foodList | filter:query">
<label>
{{food.name}}
</label>
<input type="text" class="form-control food-list-input" data-id="{{food.ingredientId}}" placeholder="Weight in grams.">
</div>
The thing is that when I apply the filter, all inputs I previously inserted some value, if they are hidden because of the filter, they return to empty.
Is there anyway around this?
I think you probably want to bind the input to something using ng-model, for example:
<input type="text" ng-model="food.dosage" class="form-control food-list-input" data-id="{{food.ingredientId}}" placeholder="Weight in grams.">
That will implement two-way binding from your model to the input tag, so that when ng-repeat re-runs, the previously entered values will be re-bound from the model.