When I run Lighthouse on my local project it returns the following:
Form elements do not have associated labels
For inputs I've used id="<input_id>", adding for="<input_id>"to its label. But now, I have a component for selecting the country, which is responsible for loading the list of countries.
<form name="notificationDetailForm" [formGroup]="form">
<div class="key-input">
<label for="country-label">Country</label>
<country-selector id="country-label" formControlName="country"></country-selector>
</div>
</form>
So, label is separated from the select tag, which is inside the country-selector component:
<select [(ngModel)]="selectedCountry">
<option [ngValue]="null" disabled selected>-- Select country --</option>
<option *ngFor="let country of countries$ | async" [ngValue]="country">
{{ country.name }}
</option>
</select>
I have tried using aria-labelledby in the form component but it is the same.
My question is: How can I make the label reference the select tag inside the component?
Thank you!
You can pass it through via an input property
country-selector.ts
#Input() controlId: string;
country-selector.html (other html
<select [id]="controlId" [(ngModel)]="selectedCountry">
<option [ngValue]="null" disabled selected>-- Select country --</option>
<option *ngFor="let country of countries$ | async" [ngValue]="country">
{{ country.name }}
</option>
</select>
parent.html
<country-selector controlId="country-label" formControlName="country">
</country-selector>
You will probably need to do a similar thing with formControlName - avoid using #Input() property names that clash with the Angular directive names.
The problem with your approach is that you are assigning the id to the parent control itself (inspect the HTML that is generated). So the label never gets associated with the <select>.
Related
Such the title, anyone can help me ? This is my code html
<select id="SelectTemplate">
<option hidden disabled value>View available templates</option>
<option *ngFor="let email of observableEmail | async">{{email.name}}</option>
</select>
you are close, please refer Angular doc for examples, you can try:
('yourFunc' indicates your typescript method name)
<select id="SelectTemplate" (change) = "yourFunc($event.target.value)">
<option hidden disabled value>View available templates</option>
<option *ngFor="let email of observableEmail | async" [value]="email">{{email.name}}</option>
</select>
I have the following code:
<select class="form-control" required>
<option *ngFor="let car of cars" type="text">{{car.Name}}</option>
</select>
my problem is that i can get just a name, so *ngFor fails.
is there a way in HTML to make a condition like. If not Javascript or Jquery
//There are more than 1 option
if(options.length>1){<option *ngFor="let car of cars" type="text">{{car.Name}}</option>}
//There is only an option
else {<option *ngIf="car" type="text">{{car.Name}}</option>}
Car
export class Car {
id: String;
name: [{
brand: String,
}
}]
}
JSON returns an Array[] when there are more than one element. If not, it returns an Object{} so I can not use *ngFor
Solved
The problem was in the back-end, and not in the front-end
You can use *ngIf directive like:
<select id="oneICO" class="form-control" required *ngIf="cars.length > 1">
<option *ngFor="let car of cars">{{car.Name}}</option>
</select>
<input type="text" *ngIf="cars.length < 2">{{car.Name}}</input>
Checking if a variable is an array in the template is sort of nasty How to check type of variable in ngIf in Angular2
It would be better to check if !(cars instanceof Array) and then turn it into an array in your javascript code.
In html you can use ngif in angular2
<div *ngIf="options.length>1">
<option *ngFor="let car of cars" type="text">{{car.Name}}</option>
</div>
or simple put the next code in html
<option *ngIf="options.length == 1 " type="text">{{car.Name}}</option>
cars is not a collection so you don't need any angular directives:
<select id="oneICO" class="form-control" required>
<option>{{cars.Name}}</option>
</select>
In which case, rename cars to car so that it signifies a single item.
[It is a little pointless, though, have a select with only a single option.]
Note that an option does not have a type attribute.
Your original code is fine. There's nothing wrong with it.
<select id="oneICO" class="form-control" required>
<option *ngFor="let car of cars" type="text">{{car.Name}}</option>
</select>
If you have single car, make an array of single element and it will work just fine.
cars = ['Honda']
If you have multiple cars, you'll have something like this.
cars = ['Honda', 'Toyota', 'Mitsubishi']
I have a select HTML element in an Angular ngFor loop:
<select formControlName="type" required>
<option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option>
</select>
In Internet Explorer, the first item in the list is selected when the template loads, but it's value isn't set in the form control, so causes a 'required' validation error until another value is selected in the list. I want to have a 'Please select' option that has a null value to prevent this happening.
This is for Angular 2+ used with or without TypeScript
Add an option like so:
<option [ngValue]="null">Please select</option>
So your control will look like:
<select formControlName="type" required>
<option [ngValue]="null">Please select</option>
<option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option>
</select>
This works as Angular inspects the value attribute because of the square brackets. The value becomes a true null, unlike if we used value="" (this is just an empty string and doesn't match null).
In case you're not using ngForm, another approach to implementing the selected value is to do something like [value]='selectedType' (change)='selectedType = $event.target.value' in your select tag. For example:
In your component.ts:
public selectedType: string;
In your component.html
<select [value]='selectedType' (change)='selectedType = $event.target.value'>
<option value=''>-- Select your Type --</option>
<option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option>
</select>
component.ts
public selectedValue = 'None';
component.html:
<div ">
<label>Highlight</label>
<select [(ngModel)]="selectedTrunk" (change)="onChangeTrunk($event)">
<option value='None'>None</option>
<option *ngFor="let trunklist of DRLNameTrunkList" [selected]="trunk" [value]="trunklist.SIPTRUNKNAME">{{trunklist.SIPTRUNKNAME}}</option>
</select>
</div>
This is my code pelase modify as per your requirements
vatCodeList is an error with string codes.
Example: ['34u' , '23' ,'tt']
Need to set the selected value there .
<select class="custom-select" formControlName="vatCode">
<option *ngFor="let i of vatCodeList">{{i}}</option>
</select>
Inside your *.component.ts
public vatCode: any;
Inside your *.component.ts you can set the value of vatCode to one of the values contained within vatCodeList, this will update the selected value.
Inside the *.component.html
<select class="custom-select" formControlName="vatCode" [(ngModel)]="vatCode">
<option *ngFor="let i of vatCodeList">{{i}}</option>
</select>
You can bind the value property like this
<option [value]="i" *ngFor="let i of vatCodeList">{{ i }}</option>
You can try to put an expression to the option tag to make an option selected
<select class="custom-select" formControlName="vatCode">
<option *ngFor="let i of vatCodeList" {{i == vatCode?'selected':'' }}>{{i}}</option>
</select>
The variable should reference the value of the InputControl. Using reactive forms it would be easy to extract the value and put it into expression.
The easiest way to bind the element to the model with ngModel but you can check if this solution helps.
<form>
<div class="form-group">
<label for="sel1 primary"></label>
<select class="form-control" id="sel1">
<option *ngFor="let group of instanceList"(click)="change_group(group.name)" > {{group.name}}
</option>
</select>
</div>
</form>
Sorry for bad indentation.
Instancelist list is the array of object contain, id, name, groupnumber.
I want to get the value of selected option in my calling method and want to display it in console.
function change_group(groupname){
this.change_to=groupname;
console.log(change_to);
}
The problem is, the given function not even call upon selecting value in dropdown.
Why not leave the option tags alone and just subscribe to the selection changed event in the <select> tag
<select class="form-control" id="sel1" (change)="onGroupChange($event)">
(click) on <option> is usually not how to do it.
Use instead ngModel
<select class="form-control" id="sel1" ngModel (ngModelChange)="change_group($event)">
<option *ngFor="let group of instanceList" [ngValue]="group"> {{group.name}}
</option>