HTML Code:
<form autocomplete="on" xpath="1">
<div class="IiD88i _351hSN">
<input class="_2IX_2- VJZDxU" autocomplete="off" type="text" value="">
<span class="_36T8XR"></span>
I can write this one : //input[#type='text']
But how to write it in "following sibling" CSS/xpath of the above code?
If you want to fetch input node based on its sibling, try:
//label[.='Enter Email/Mobile number']/preceding-sibling::input
I have a website that uses a filtering system built in Vue.js, it filters properties with "states", "cities" and "type", the code looks like this, it works for states and types but not for cities which come from an Object rather than an Array. I am not sure how to acces the value inside of the Object.
<div class="grid-x grid-margin-x">
<div class="cell medium-auto">
<label for="property-state">STATE</label>
<select name="property-state" #change="search()" id="property-state">
<option value="">Select</option>
<option v-for="val in terms['property-state']" :value="val.id">{{ val.name }}</option>
</select>
</div>
<div class="cell medium-auto">
<label for="city">CITY</label>
<select name="city" #change="search()" id="city">
<option value="">Select</option>
<option v-for="val in terms ['location']" :value="val.id">{{ val.city }}</option>
</select>
</div>
<div class="cell medium-auto" #change="search()">
<label for="property-type">PROPERTY TYPE</label>
<select name="property-type" id="property-type">
<option value="">All types</option>
<option v-for="val in terms['property-type']" :value="val.id">{{ val.name }}</option>
</select>
</div>
</div>
I am aware that I'm trying to access "location" as if it were an Array but not sure how to do it as it is an Object as seen in the image attached.
The data I am trying to access is structured as follows:
location (Object)
|
city: "cityName"
In Vue, v-for treats an object and an array in the same way. An array has the same type of values, but an object has a structure that could be different. Use computed properties to save your city name into an array.
https://v2.vuejs.org/v2/guide/list.html#v-for-with-an-Object
In angular material, autocomplete feature mat-option will have same entries on "value" field and text within.
<mat-form-field fxFlex="50">
<input type="text" placeholder="{{label.addUser.formLabels.role}}" matInput [matAutocomplete]="role" formControlName="roleId">
<mat-autocomplete #role="matAutocomplete" autoActiveFirstOption>
<mat-option *ngFor="let option of roleListFilter | async" value="{{option.roleId}}" >
<span>{{option.roleName}}</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
and I get the output as shown in the following question..
How can I get selected item value in Angular 2 Material Autocomplete
I want to display selected string in the text box and set roleId in value field at the same time.. Is this achievable?
Try below code:
<mat-form-field>
<input matInput placeholder="State" aria-label="State"
[matAutocomplete]="auto" [formControl]="your_ctrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option (click)="getSelectedElementId(item.id)" *ngFor="let item of your_list | async"
[value]="item.name">
<span>{{ item.name }}</span> |
</mat-option>
</mat-autocomplete>
</mat-form-field>
In .ts file:
getSelectedElementId(id){
console.log(id)
}
I have the following code
<form #createForm="ngForm">
<mat-form-field>
<mat-select placeholder="Favorite food"
matInput
[ngModel]
food="food"
#food="ngModel" required>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{ food.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
</form>
<button [disabled]="!createForm.valid">submit</button>
Since I want the "selection" is a required field, the "submit" button should be disabled when the form is rendered. However, the "submit" button is enabled when the form is displayed. What is the problem?
This works for me when I (a) use a name attribute and (b) use the two-way ngModel binding syntax.
i.e. Instead of this
<mat-select placeholder="Favorite food" matInput [ngModel] food="food" #food="ngModel" required>
use this:
<mat-select name="food" placeholder="Favorite food" [(ngModel)]="food" required>
for validation in angular 5 use reactive forms. refer this
*** componenet.ts *******
import { FormControl, Validators, FormBuilder, FormGroup, ReactiveFormsModule, NgForm } from '#angular/forms';
export class Test implements OnInit{
foodform:FormGroup;
constructor(){}
ngOnInit() {
// create form group of controls
this.foodform = new FormGroup({
favoriteFood: new FormControl('', [Validators.required])
});
}
}
**** Component.html************
<form #createForm="ngForm" [formGroup]="foodform ">
<mat-form-field>
<mat-select placeholder="Favorite food"
matInput
[ngModel]
food="food"
#food="ngModel" formControlName="favoriteFood">
<mat-option *ngFor="let food of foods" [value]="food.value" >
{{ food.viewValue }}
</mat-option>
</mat-select>
<mat-error *ngIf="foodform.controls['favoriteFood'].hasError('required') && foodform.controls['favoriteFood'].pristine">
Required Message
</mat-error>
</mat-form-field>
</form>
use [formGroup] and formControlName in your html form.
The only way required field validation works on a mat-select is by using reactive form validation. Just import the respective components in typescript file:
import {FormControl, Validators} from '#angular/forms';
HTML file :
Remove your ngModel reference
<mat-form-field>
<mat-select placeholder="Favorite food"
matInput [formControl]="foodControl"
required>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{ food.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
This works for the required field validation. If you wanted to validate more probably you will end up accessing the form in the typescript file. Its weird that there is no option to do form validation, this is the only way i found to make it work.
Look at danger89's comment under your original question.
You are missing the name attribute.
E.g:
<form #createForm="ngForm" (ngSubmit)="submitFunction(createForm)">
<mat-form-field>
<mat-select
placeholder="Favorite food"
ngModel
name="food"
required
>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{ food.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
<button type="submit" [disabled]="!createForm.valid">submit</button>
</form>
Because of the name attribute, your food.value can now be found at createForm.value.food when submitting the form.
This worked for me:
Import ReactiveFormsModule in you app module
import { ReactiveFormsModule } from '#angular/forms';
and add its dependency in #NgModule decorator
I don't know what I'm doing wrong but I can't get any solution to work using Ang8 + Material8 and a multi-select while using a FormGroup and a FormControl. I ended up doing the following as a workaround.
First I added a tag to the mat-select, #thisselect
Then I tested the value of the tag for zero length in the submit button
<form [formGroup]="bypartForm" (ngSubmit)="onSubmit()">
<mat-form-field [hideRequiredMarker]="true">
<mat-select #thisselect placeholder="Brands" formControlName="brands"
(selectionChange)="selectChanged($event)" multiple required>
<mat-option *ngFor="let brand of brandList" [value]="brand.name">{{brand.name}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field [hideRequiredMarker]="true">
<input matInput autocomplete="off" placeholder="Part#" formControlName="part" required>
</mat-form-field>
<div class="form-buttons">
<button mat-raised-button color="primary" type="submit" [disabled]="!bypartForm.valid || (thisselect.value != undefined && thisselect.value.length == 0)">Submit</button>
</div>
</form>
I need set a default Radio button selected on opencart 2.3 using javascript
Normal
Selected
<div class="radio" style="margin-top: -5px;"><!--EOF Related Options-->
<!--BOF Related Options--><label for="option-value-2492"><!--EOF Related Options-->
<!--BOF Related Options-->
<input type="radio" name="option[590]" value="2492" id="option-value-2492" master-option-value="0" option-value="115">
<!--EOF Related Options-->
Comprar par </label>
</div>
Add checked="checked"
<input type="radio" name="option[590]" value="2492" id="option-value-2492" master-option-value="0" option-value="115" checked="checked">