I've been trying to find a way to pull the value of a selected mat-option with this html/ts pairing.
html
<mat-form-field appearance="outline" floatLabel="always">
<mat-label>TRA Type</mat-label>
<mat-select
placeholder="TRA Type"
id="traType"
name="traType"
data-qa="new-tra"
[(ngModel)]="formSelect"
required>
<mat-option id="Regular" name="Regular" value="Regular">Regular</mat-option>
<mat-option id="Unitary" name="Unitary" value="Unitary">Unitary</mat-option>
</mat-select>
<mat-hint>Required</mat-hint>
</mat-form-field>
ts
formSelect: string;
traType = <any>{};
When propping up the page locally, this.traType.value doesn't prop up the value of the selected mat-option. It comes up as undefined when the expected result would be either "Regular" or "Unitary."
this.traType.value doesn't show the selected value as you miss [formControl] Input binding in <mat-select> element.
Solution:
Add [formControl]="traType" in <mat-select> element.
<mat-select placeholder="TRA Type"
id="traType"
name="traType"
[formControl]="traType"
data-qa="new-tra"
required>
..
</mat-select>
Solution in StackBlitz
Note: You are recommended to remove [(ngModel)] binding if you use [formControl] as it has been deprecated in Angular v6.
Reference
Form field features (Sample in HTML)
Related
Need to display the empty (None) option in Material Select element when the item is null.
<mat-label>Status</mat-label>
<mat-select formControlName="statusId">
<mat-option>None</mat-option>
<mat-option *ngFor="let item of statuses" [value]="item.id">
{{ item.name }}
</mat-option>
</mat-select>
</mat-form-field>```
As seen in above snippet I need to display the "None" option selected by default when the page loads.
StackBlitz
So, you can add a empty value to the None option.
<mat-select [formControl]="foodControl" name="food">
<mat-option value="">None</mat-option>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
And, in the ts, you can initialize the control with empty value like this
foodControl = new FormControl('');
same thing can be done with ngModel as well. (included in the StackBlitz)
I am using material and form in a component in angular 6.
<mat-form-field>
<input matInput [matAutocomplete]="auto" [formControl]="autoForm"
formControlName="formg">
<mat-autocomplete #auto="matAutocomplete" panelWidth="200">
<mat-option *ngFor="let val of list | async" [value]="val.code"
(onSelectionChange)="changed($event)">
<span>{{val.code}} - {{val.name}}</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
Now the value shown on textbox is the code number only. I would like to display it as "val.code-val.name" . Shall we do it from html itself? without changing the form values? thanks in advance
I have a simple <select> in Angular (with Material) as follows:
<mat-form-field>
<mat-label>Type</mat-label>
<mat-select placeholder="Type" formControlName="type" name="type" id="name">
<mat-option>None</mat-option>
<mat-option *ngFor="let t of types" [value]="t">
{{t}} <-- it is enum -->
</mat-option>
</mat-select>
</mat-form-field>
I would like to use index of selected type in the other part of code.
To be more precise: in *ngFor of another select. Therefore, I can't use documentById.
In addition, I don't want to install jQuery just for do this.
Is it possible?
As suggested by this Angular Material Documentation example, you can bind to [(value)] two ways:
<mat-form-field>
<mat-select [(value)]="selected">
<mat-option>None</mat-option>
<mat-option *ngFor="let t of types; let i = index" [value]="i">{{t}}</mat-option>
</mat-select>
</mat-form-field>
<p>You selected: {{selected}}</p>
selected will be a property on your class.
Here's a Working StackBlitz from the Angular Team for your reference.
You can simply set [(ngModel)] variable and use the variable to get your index
<mat-select placeholder="Type" [(ngModel)]="selected" formControlName="type" name="type" id="name">
<mat-option>None</mat-option>
<mat-option *ngFor="let t of types" [value]="t">
{{t}} <-- it is enum -->
</mat-option>
</mat-select>
and then in the component, use
this.index = this.types.findIndex(item => item === selected);
Per Sajeetharans answer, using ngModel together with reactive form is not recommended, and is also deprecated. Instead watch for the changes of the form control and find the index and store it in a variable for later use. Here's a sample:
myForm: FormGroup;
idx: number;
foods = ['Steak', 'pizza-1'];
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
mySelect: ['']
});
this.myForm.get('mySelect').valueChanges.subscribe((value) => {
this.idx = this.foods.findIndex(val => val === value);
console.log(this.idx)
});
}
I'm building a web form that is supposed to be dynamic.
When a user selects an option from a list, the next form inputs are generated based on his input.
For instance:
<mat-form-field>
<mat-select placeholder="Type" [(ngModel)]="row.Type" (change)="TypeChosen(row.Type, row)">
<mat-option [value]="0">Treatment</mat-option>
<mat-option [value]="1">Travel</mat-option>
<mat-option [value]="2">Medication</mat-option>
<mat-option [value]="3">Equipment</mat-option>
</mat-select>
</mat-form-field>
If he selects Type 'Treatment', he gets another selection input with some options with a few other inputs, and if he selects a different Type, he gets different options and other inputs.
I understand that I need to dynamically generate HTML content, and maybe a dynamic component.
What is the best approach to do this in an easy way?
I'd suggest creating a component for each sub-form and then *ngIf them based on the selected option, like so:
<!-- component.html -->
<mat-form-field>
<mat-select placeholder="Type" [(ngModel)]="row.Type" (change)="onTypeChosen(row.Type, row)">
<mat-option [value]="0">Treatment</mat-option>
<mat-option [value]="1">Travel</mat-option>
<mat-option [value]="2">Medication</mat-option>
<mat-option [value]="3">Equipment</mat-option>
</mat-select>
</mat-form-field>
<my-treatment-component *ngIf="type === 0" [someInput]="'some value'"></my-treatment-component>
<my-travel-component *ngIf="type === 1" [somethingElse]="true"></my-travel-component>
<my-medication-component *ngIf="type === 2" (someOutput)="onMedicationOutput($event)"></my-medication-component>
<my-equipment-component *ngIf="type === 3"></my-equipment-component>
If you already have something holding your Type selection, you can bind that to the *ngIfs instead. If not, create a field in your controller class and hold the selected type in there.
// component.ts
public type: number | null = null;
public onTypeChosen(type: number, row): void {
this.type = type;
}
If your sub-forms have parts that are re-usable (or are basically the same, sans configuration), it's generally a good practice to extract the re-usable code into components in and of themselves and compose them together.
Hope this helps a little :-)
To Add the options dynamically, angular provide ( *ngFor ).
<mat-form-field>
<mat-select placeholder="Type" [(ngModel)]="row.Type" (change)="TypeChosen(row.Type, row)" *ngFor="let option of options; let i = index">
<mat-option (click)="updateOptions(option)" [value]="{{i}}">option.text</mat-option>
</mat-select>
</mat-form-field>
in your controller .ts
private options = [];
private initOptions(){
this.options = [
{text:'Treatment' , possibleOptionsRelates:[text:'possible1']},
{text:'Travel' , possibleOptionsRelates:[text:'possible12']},
{text:'Medication' , possibleOptionsRelates:[text:'possible13']}];
}
private updateOptions(option){
this.options.push(...option.possibleOptionsRelates);
}
This might be a stupid question with a very simple answer, but after a week of coding I feel fried and can't figure it out.
How can I bind to the Id of a selection, but display the string representation of the value? I.e., I have a drop-down that display the names of Customers, but I want to save the Id for DB purposes.
My selection item has two properties: customer.Display (Name), and customer.Id.
How can I do the binding to save my Id to [(ngModel)]="loadDataService.selectedLoad.CustomerId, but display my Display in the drop-down (it already displays the Display, so that is covered):
<mat-form-field>
<input type="text" placeholder="Customer Search" id="CustomerId" name="CustomerId" aria-label="Number" matInput [formControl]="myCustomerSearchControl"
[matAutocomplete]="auto" [(ngModel)]="loadDataService.selectedLoad.CustomerId" (keyup)="onCustomerSearch($event)">
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
<mat-option *ngFor="let customer of customerArray" [value]="customer.Display">
{{ customer.Display }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
When you use the autocomplete, you have a optionSelected event. You need to use that to find your selected option.
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="setServiceId($event)">
...
</mat-autocomplete>
Then, in your component, you must implement that function :
setServiceId(dislay: string) {
const id = this.customerArray.find(c => d.Display === display).id;
this.loadDataService.selectedLoad.CustomerId = id;
}
This way of doing assumes you have unique customer displays. If not, you will need to use this function, with the previous HTML + this HTML :
setServiceId(customer: any) {
this.loadDataService.selectedLoad.CustomerId = customer.id;
}