<input [formControl]="twitterHandle" id="twitterHandle" placeholder="twitterHandle">
in there i get input via that and using following code get the input value
twitterHandle=new FormControl();
twitterHandle:this.twitterHandle.value,
simillar way i need to add static select input to form how to do that and how to edit following
<select>
<option value="option">country1</option>
<option value="option1">Sri lanka</option>
<option value="option2">Canada</option>
</select>
You just have to define another formControl :
selectControl : FormControl = new FormControl();
and you can initialize the control :
ngOnInit(){
this.selectControl.setValue('option')
}
In your template ,
<form>
<select [formControl]='selectControl' (change)='test()'>
<option [value]='"option"'>Option1</option>
<option [value]='"option1"'>Option2</option>
</select>
</form>
you can check the value changes in the test() as defined below :
test(){
console.log(this.selectControl.value);
}
You can See the example : https://angular-wytvwr.stackblitz.io
Hope this helps
Related
I'm making an app that uses a dropdown menu like:
<select name="color">
<option value="red" onChange={this.func}>Red</option>
<option value="blue" onChange={this.func}>
Blue
</option>
</select>
However, the onChange function is not working. The function given is:
func = () => {
console.log("Color");
};
I'm wondering why is this not working? What should be done to make it work?
Thanks in advance.
Your code does not work, because selects fire onChange events, and options don't. You need move the onChange event handling to the <select/>:
<select name="color" onChange={this.func}>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
// and for your func:
func = (event) => {
//event.target.value contains the selected option value, e.g. "red"
console.log("Color: ", event.target.value);
};
I have this simple select that is generating the numbers from an array in the component.ts file and I want to make it so that when the user clicks a number on the dropdown list, a variable in that .ts file is updated (inputBoxes) and that many input boxes will be displayed.
in my html file I have
component.html
<p>How many words will you be using?</p>
<select>
<option *ngFor="let num of wordCount" (click)="updateInputBoxes(num)">{{num}}</option>
</select>
component.ts
public wordCount: Array<number> = [1,2,3,4,5];
public inputBoxes: number;
constructor() { }
ngOnInit(): void {
}
updateInputBoxes(num: number) {
this.inputBoxes = num;
}
This is what I was trying so far but the updateInputBoxes function doesn't even execute. How do I know which number is selected while sending that selected number as a parameter to the function updateInputBoxes?
You need to add change method in select tag then pass the event to get current selected option vaule in ts file.
Try this code to get selected option value :
HTML CODE
<select (change)="updateInputBoxes($event)">
<option value="">
Select count
</option>
<option *ngFor="let num of wordCount" value={{num}}>{{num}}</option>
</select>
TS CODE
updateInputBoxes(event) {
this.inputBoxes = event.target.value;
}
If you want to call method after select each options you need to use change event in select tag not option tag.
And to pass selected value to your methods you can use template reference like this:
<select #selectList (change)="updateInputBoxes(selectList.value)">
<option *ngFor="let num of wordCount" [value]="num">{{num}}</option>
</select>
Here is working sample I created: StackBlitzLink
But if you only need selected value of selectbox there is no need to call fanction just use [(ngModel)]="inputBoxes" like this:
<select [(ngModel)]="inputBoxes">
<option *ngFor="let num of wordCount" [value]="num">{{num}}</option>
</select>
Use template driven or reactive forms for this.
The template driven version looks like this:
<select name="countControl" [(ngModel)]="inputBoxes">
<option *ngFor="let wordCount of wordCounts" [ngValue]="wordCount">
{{ wordCount }}
</option>
</select>
Docs: https://angular.io/api/forms/SelectControlValueAccessor#description
I have the following select in my template:
<select class="form-control" formControlName="tipo" name="tipo">
<option value="" selected disabled>(Select an option)</option>
<option value="FACT">Factura</option>
<option value="NOCRE">Nota Crédito</option>
</select>
however, despite I have put the selected directive to the first one, it does not show if the user does not click the select. It behaves like another option tag.
How can I make this option visible when the component loads without user interaction?
Since value is "" for 'Select..' option, set value "" in it's formcontrol
Working Demo
Try like this:
this.yourForm= new FormGroup({
'tipo':new FormControl(''),
});
why not Adding a model :
in your class :
tipo: string = "";
in HTML :
<select [(ngModel)]="tipo" class="form-control">
<option value="" selected disabled>(Select an option)</option>
<option value="FACT">Factura</option>
<option value="NOCRE">Nota Crédito</option>
</select>
I am trying to add a select HTML element with multiple attribute set to it in a normal Angular 4 reactive form.
When checked in Chrome developer console, it shows following HTML:
Actual:
<select class="form-control ..." formcontrolname="..." id="..." multiple="" name="..." required="" ...>
<option value="0: 'MBA'" ng-reflect-value="MBA">MBA</option>
<option value="1: 'MSc'" ng-reflect-value="MSc">MSc</option>
</select>
Expected:
<select class="form-control ..." formcontrolname="..." id="..." multiple="" name="..." required="" ...>
<option value="MBA" ng-reflect-value="MBA">MBA</option>
<option value="MSc" ng-reflect-value="MSc">MSc</option>
</select>
Why is the value and ng-reflect-value different.
This is creating problem for me to get selected values, set default values, etc.
This does not happen when multiple attribute is removed.
Any idea what is going wrong here. Yes, I have google this issue but couldn't find any solution.
Edit:
In Component:
//variables
form: FormGroup;
degrees: FormControl;
degree_list = ['MBA', 'MCA', ...];
//through constructor parameters
private _fb = FormBuilder;
//in ngOnInit
this.form = this._fb.group({
...
degrees: this._fb.control('');
...
});
In Template file:
...
<select class="form-control" name="degrees" id="degrees" formControlName="degrees" multiple required>
<option *ngFor="let degree of degree_list" [value]="degree">{{degree}}</option>
</select>
...
According to this: https://github.com/angular/angular/issues/12074#issuecomment-251475820 you can initialize your formcontrol with an empty array. Also since you are using a reactive form, remove the required from your template and instead set the Validator when you build the form:
ngOnInit() {
this.form = this._fb.group({
degrees: [[''], Validators.required]
});
}
Also notice I removed this._fb.control I'm not sure why you are using that :)
StackBlitz
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