i have this form for edit user info :
<form [formGroup]="editUSer">
<input formControlName="name">
<select formControlName="roleName">
<option *ngFor="let item of listRole">{{item.name}}</option>
</select>
</form>
use this code for setvalue in form :
this.editUSer.setValue({
name:this.usermodel.name,
roleName:this.usermodel.roleName
})
but i need to set dropdown user value .
for exmaple user have manager role but it not set the manager in drodown .
Sample Code
how can i set value of user in dropdown .
After checking your usermodel property, I have realised that it is binded to the name of item in listRole. Therefore, You will need to bind the value attribute on your to the name property of item (item.name).
<form [formGroup]="editUSer">
<input formControlName="name">
<select formControlName="roleName">
<option *ngFor="let item of listRole" [value]="item.name">{{item.name}}</option>
</select>
</form>
As for your component.ts, I don't see any glaring issues. I have edited your demo over here.
Why not bind the selected attribute.
<form [formGroup]="editUSer">
<input formControlName="name">
<select formControlName="roleName">
<option *ngFor="let item of listRole" [selected]="item.name === roleName">{{item.name}}</option>
</select>
</form>
Related
I am trying to submit form using angular, form is successfully submitted. Issue is after form submit, drop down shows as a invalid state. How to remove it.
<form class="form-inline" name="form" #invoiceheaderform="ngForm" novalidate (ngSubmit)="invoiceheaderform.form.valid && fileNameList();">
<label for="bank" class="lb-adj">Banks</label>
<select class="form-control fix-dropdown" required [ngClass]="{'is-invalid':invoiceheaderform.submitted && orgname.invalid}" #orgname="ngModel" [(ngModel)]="orgNameModel.orgName" name="orgName">
<option value="">--Select--</option>
<option *ngFor="let bank of orgNameModel | async">{{bank}}</option>
</select>
<button type="submit" [disabled]="disableRunButton" class="btn btn-primary mb-2 expad">Search</button>
</form>
try this, after your form is submitted successfully, change your variable to undefined
this.orgNameModel.orgName = undefined;
latest angular forms with reset() is not working as expected.
EDIT
your using async for options may be that is effecting the functionality.Try to remove async and provide an array to the options
<select class="form-control fix-dropdown" required [ngClass]="{'is-invalid':invoiceheaderform.submitted && orgname.invalid}" #orgname="ngModel" [(ngModel)]="orgNameModel.orgName" name="orgName">
<option value="">--Select--</option>
<option *ngFor="let bank of orgNameModel">{{bank}}</option>
</select>
component.ts
orgNameModel:any = [];
//assign the list of banks to orgNameModel
Modify your first <option> tag like this -
<option value="undefined" disabled="true">--Select--</option>
I am using wenzhixin/multiple-select as it has select all option. I'm trying to get selected items ticked that were selected while creating the post.
This is what i have done but it doesn't work.
{{ Form::label('tags', 'Tags:') }}
<select name="tags[]" multiple="multiple" id="tags">
#foreach($tags as $tag)
<option value="{{$tag->id}}">{{$tag->name}}</option>
#endforeach
</select>
<script>
$("#tags").multipleSelect({
placeholder: "Tags please"
});
$('#tags').multipleSelect().val({!!json_encode($post->tags()->getRelatedIds() )!!}).trigger('change');
</script>
I would be thakful if anyone can help me.
At the end of the day, it's just an HTML select element. Given the name of tags[], this will submit within the form and be accessible through a controller as $request->get('tags') or if using the helper, then request()->get('tags');
Furthermore, you can pass the selected items to the next page in this way:
public function myFunctionToHandleTheForm()
{
$tags = App\Tag::all(); //for example, no idea what you use
$selectedTags = request()->get('tags');
return view('my.view', compact('selectedTags', 'tags');
}
Now, $tags will be a numerically ordered array (ascending) containing the ID's that were submitted from your form. You can set the defaults that were checked just like this:
{{ Form::label('tags', 'Tags:') }}
<select name="tags[]" multiple="multiple" id="tags">
#foreach($tags as $tag)
<option value="{{$tag->id}}" {{ in_array($tag->id, $selectedTags) ? 'selected="selected"' : null }}>{{$tag->name}}</option>
#endforeach
</select>
In the above, we're checking if the tag id is in the list of selected tag id's, and if so, we're setting the selected attribute. Your plugin will understand this and translate it correctly.
I want to get the value of all elements in a form on submit button. I serialize the data in the form but for some reasons that I don't understand in the serialised data the value of selected option on select field is not included there.
Here's a Js fiddle
My form looks like this:
<form id='foo'>
<p>
<label>Message</label>
<textarea id='message' name='message' rows='5'></textarea>
</p>
<br/>
<p>
<label>Name</label>
<select id = "name">
<option value = "1">one</option>
<option value = "2">two</option>
<option value = "3">three</option>
<option value = "4">four</option>
</select>
</p><br/>
<div id='success'></div>
<button type='submit'>Send</button>
</form>
<p id="showdata">
</p>
On submit of this form I some jquery code that handles it. It looks like this :
// Bind to the submit event of our form
$("#foo").submit(function(event){
// Abort any pending request
if (request) {
request.abort();
}
// setup some local variables
var $form = $(this);
// Let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// Serialize the data in the form
var serializedData = $form.serialize();
$('#showdata').html(serializedData);
});
Can somebody help me to understand where is my problem! Thank you in advance.
Forms work on the name, and not ID attribute. Give you select element a name value and it will work.
Your code seems to correct but you have a mistake.
Look at select , it has no attribute name. So, $form.serialize() will not work on this element.
This is fixed by add attribute name to select
<form id='foo'>
<p>
<label>Message</label>
<textarea id='message' name='message' rows='5'></textarea>
</p>
<br/>
<p>
<label>Name</label>
<select name="test">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</p><br/>
<div id='success'></div>
<button type='submit'>Send</button>
</form>
<p id="showdata">
</p>
More information : Form Serialize
If you use $form.serialize() in select element you should add attribute name in there because $form.serialize() will get values from attribute name
Update
https://jsfiddle.net/drhe1L9u/
Add attribute name to select element
I have a table and when clicking on a row I call this function:
$scope.updateRow = function(row) {
$scope.row = angular.copy(row);
}
$scope.row has a name attribute and I have a select menu that should display this name:
<select name="rowName" ng-model="row.name" required required-message="'A name must be selected '" class="sa-select">
<option value=""></option>
<option ng-repeat="name in names" value="{{name.fullName}}">{{name.fullName}}</option>
</select>
However when clicking the row it sets the option value in the select menu to
<option value="? string:test name ?"></option>
even though $scope.row.name = "test name"
The option value should look like:
<option value="test name">test name</option>
Seems to be a similar issue to this question: Angular adds strange options into select element when setting model value
<select name="rowName" ng-options="name.fullName as name.fullName for name in names" ng-model="row.name" required required-message="'A name must be selected '" class="sa-select">
Not tested tho, but you can read more here: https://docs.angularjs.org/api/ng/directive/ngOptions
And if you would want to add a default option it would look like this:
<select name="rowName" ng-options="name.fullName as name.fullName for name in names" ng-model="row.name" required required-message="'A name must be selected '" class="sa-select">
<option value="your value"> your text </option>
</select>
I want to display the selected items in a label or list.
I am using switch to switch between form and result. Please see the code below
<div ng-switch on="format">
<div ng-switch-when="form">
<div class="floatLeft">Seeeeeelect</div>
<select multiple="multiple" ng-model="test">
<!--<option value ="sdfsdf" ng-repeat="n in ['a','b','c']">{{n}}</option>-->
<option value ="AAA">AAA</option>
<option value ="BBB">BBB</option>
<option value ="CCC">CCC</option>
</select>
{{test}}
</div>
<div ng-switch-when="result">{{test}}</div>
</div>
<button ng-click="showForm()">Form</button>
<button ng-click="showPreview()">Result</button>
In controller i have the method like below,
$scope.showPreview=function() {
$scope.format='result';
};
$scope.showForm=function() {
$scope.format='form';
};
After selecting the items in list, when i try to switch to see the "result" by tapping "Result" button. The selected item is not populating.
Can anyone tell me where i went wrong.
Thanks
The ng-switch creates sub-scopes. So you have to reference test by $parent.test.
<select multiple="multiple" ng-model="$parent.test">
<div ng-switch-when="result">{{ $parent.test }}</div>
</select>
{{ $parent.test }}
</div>
fiddle