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);
}
Related
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)
I am using mat-select within Angular Material as below:
<mat-form-field class="full-width">
<mat-select (selectionChange)="dropdownSelectedItem($event)">
<mat-option *ngFor="let item of itemList" [value]="item">
{{item.name}}
</mat-option>
</mat-select>
</mat-form-field>
The above dropdown is coming up fine but the dropdown has no default value.
In order to add a default value, I have added value="{{dropdownSelectedName}}" as below:
<mat-form-field class="full-width">
<mat-select (selectionChange)="dropdownSelectedItem($event)" value="{{dropdownSelectedName}}">
<mat-option *ngFor="let item of itemList" [value]="item">
{{item.name}}
</mat-option>
</mat-select>
</mat-form-field>
The above change is still not populating the default dropdown value.
I have also tried doing [(value)]="dropdownSelectedName"
When I do console.log(this.dropdownSelectedName) in the component, I can see that it has a string value
mydefaultvalue
ngOnInit() {
this.subs.sink = this.myService.listAll()
.subscribe(r => {
this.AllList = r;
});
this.dropdownSelectedName = "mydefaultvalue";
}
To set a default value to mat-select, you have to bind compareWith property, which will compare the values and will set the default value.
Example:
In your HTML:
<mat-form-field class="full-width">
<mat-select (selectionChange)="dropdownSelectedItem($event)" [(ngModel)]="dropdownSelectedName" [compareWith]="compareFn">
<mat-option *ngFor="let item of itemList" [value]="item">
{{item.name}}
</mat-option>
</mat-select>
</mat-form-field>
In your TS:
compareFn(obj1: any, obj2: any) {
return obj1 && obj2 ? obj1.id === obj2.id : obj1 === obj2;
}
the value of your mat-option is a object reference to a item Object.
therefore the value that you set on mat-select must be the exact same item object reference.
this means that in your compoenent your code should
this.dropdownSelectedName = [Insert Object Reference Here]
the alternative approach is to change your mat-option to set
<mat-option *ngFor="let item of itemList" [value]="item.name">
{{item.name}}
<mat-option>
with this change your "myDefaultValue" would match the value of one of the options, instead of being an object reference
Update
Here is a link that shows a working version of setting the value of the select when using object references.
I have a multiple select form:
<mat-form-field>
<mat-label>Toppings</mat-label>
<mat-select [(value)]="selected" multiple>
<mat-option *ngFor="let topping of toppings" [value]="topping">{{topping.value}}</mat-option>
</mat-select>
</mat-form-field>
<p>You selected: {{selected}}</p>
I want to display options that user selected under the form with <p>You selected: {{selected}}</p>, but if I do it this way I get when I select 3 toppings:
You Selected: [object Object],[object Object],[object Object]
Now I tried <p>You selected: {{selected?.value}}</p> I don't get any entry.
The only solution I have found so far is:
<p>You selected: {{selected | json}}</p> but I do not want whole json object just value property.
How do I get it to display:
You selected: option1, option2, option3
?
Printing "[object, object]" means you are trying to use an object as a string.
toppings is an array of objects. You are looping through this array with let topping of toppings and assigning an object to topping.
{{topping.value}} prints the string in the .value property of topping object but you assigned back the whole object in [value]="topping".
This way selected becomes an array of objects although you are only seeing strings while clicking on options.
Two ways to achieve what you want;
- Pass string from options
<mat-form-field>
<mat-label>Toppings</mat-label>
<mat-select [(value)]="selected" multiple>
<mat-option *ngFor="let topping of toppings" [value]="topping.value">{{topping.value}}</mat-option>
</mat-select>
</mat-form-field>
<p>You selected: {{selected}}</p>
- Loop through selected array
<mat-form-field>
<mat-label>Toppings</mat-label>
<mat-select [(value)]="selected" multiple>
<mat-option *ngFor="let topping of toppings" [value]="topping">{{topping.value}}</mat-option>
</mat-select>
</mat-form-field>
<p>You selected:
<span *ngFor="let s of selected; let f = first; let l = last;">
{{s.value}}
<span *ngIf="!(f && l) && !l">,</span>
</span>
</p>
I hope this helps you clarify angular templating and data binding.
Try Changing your HTML to :-
<mat-form-field>
<mat-label>Toppings</mat-label>
<mat-select [(value)]="selected" multiple>
<mat-option *ngFor="let topping of toppings" [value]="topping">{{topping.value}}</mat-option>
</mat-select>
</mat-form-field>
<p>You selected: {{selected | json}}</p>
You can either make a new property on the component to bind in the template, or make a new pipe to display comma-delimited items.
Without a pipe:
get displaySelections(): string {
return this.selections.map(s => s.value).join(', ');
}
<p>You selected: {{displaySelections}}</p>
With a pipe, you can re-use in other components as well, and you don't need to add the getter:
#Pipe({
name: 'join'
})
export class JoinPipe implements PipeTransform {
transform(value: {value: any}[]): string {
return value.map(v => v.value).join(', ');
}
}
<p>You selected: {{ selections | join }}</p>
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)
});
}
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;
}