I have a template driven form which has multiselect field called assets.
I am using semantic UI.
<div ngModelGroup="assets">
<div class="field">
<label for="resourceName">Assets</label>
<div class="form-control">
<select ngModel name="resourceName" multiple="" #resourceName="ngModel" id="multi-select" class="ui dropdown" required>
<option *ngFor = "let x of resources" value ="{{x.resourceName}}" >{{ x.resourceName }}</option>
</select>
</div>
</div>
</div>
the json I am getting from the dropdown is in the format:
"assets":{"resourceName":["laptop","keyboard"]}
but I want it in this format:
"assets":[{"resourceName":"laptop"},{"resourceName":"keyboard"}]
How do I do that?
You could use map transformation over array to get desired output.
this.resources = this.assets.resourceName.map(i => { resourceName: i})
Related
I am trying to pass the html elements of a form through the submit function as parameters. I can get correctly the nameInput element with flag #nameInput, but the select element (#skillSelect) is throwing this error:
- error TS2339: Property 'skillSelect' does not exist on type 'MemberFilterComponent'.
Here is my form template. How can I pass the select element to component as I did with the input text?:
<form
[formGroup]="filterMemberForm"
(ngSubmit)="onSubmit(nameInput, skillSelect)"
>
<div class="form-row">
<div class="col-md-3">
<label class="font-weight-bold"
>Name
<input
ngDefaultControl
type="text"
class="form-control"
label="'Name'"
formControlName="name"
placeholder=" Ex: Maria Novillo"
required
id="name"
#nameInput
(change)="mapChipValue(nameInput)"
/></label>
</div>
<div class="col-md-3" *ngIf="skills.length !== 0">
<label class="font-weight-bold">Skills:</label>
<select
id="skillId"
class="form-control"
formControlName="skillId"
#skillSelect
(change)="mapChipValue(skillSelect)"
>
<option value="">-- Select skills --</option>
<option *ngFor="let skill of skills" [value]="skill.idSkill">
{{ skill.skill }}
</option>
</select>
</div>
<div class="form-row">
<div class="col-md-3 mt-5">
<button type="submit" class="btn btn-primary">Apply</button>
</div>
</div>
</form>
In the html file:
<select class='select-option'
#mySelect
(change)='onOptionsSelected(mySelect.value)'>
<option class='option'
*ngFor='let option of dropDownData'
[value]="option.seo_val">{{option.text_val}}</option>
</select>
In the ts file:
onOptionsSelected(value:string){
console.log("the selected value is " + value);
}
why you need pass the "html element"? in filterMemberForm.value you has an object with the values. Really your form should be
<form
[formGroup]="filterMemberForm"
(ngSubmit)="onSubmit(filterMemberForm)"
>
onSubmit(form:FromGroup)
{
if (form.valid)
console.log(form.value)
else
form.markAllAsTouched()
}
if you need the selectOption name always can makes
onSubmit(form:FromGroup)
{
if (form.valid)
{
//if is not multiple select
const selectedItem=this.skills.find(x=>x.idSkill==form.value.skillId)
console.log(form.value,selectedItem)
//if is multiple select
const selectedItems=this.skills.filter(
x=>form.value.skillId.indexOf(x.idSkill)>=0)
console.log(form.value,selectedItems)
}
else
form.markAllAsTouched()
}
I just started working with HTML and TypeScript and I'm stuck trying to set value of field depending on the value selected for another field in my HTML form.
HTML
<div class="form-group">
<label class="form-control-label" jhiTranslate="country.status" for="field_status">Status</label>
<select class="form-control" name="status" formControlName="status" id="field_status">
<option value="ACCEPTED">{{ 'CountryStatus.ACCEPTED' | translate }}</option>
<option value="CHECK_ONGOING">{{ 'CountryStatus.CHECK_ONGOING' | translate }}</option>
<option value="CHANGE_REQUESTED">{{ 'CountryStatus.CHANGE_REQUESTED' | translate }}</option>
</select>
</div>
<div class="form-group">
<label class="form-control-label" jhiTranslate="country.approvalDate" for="field_approvalDate">Approval Date</label>
<div class="d-flex">
<input id="field_approvalDate" type="datetime-local" class="form-control" name="approvalDate" formControlName="approvalDate" placeholder="YYYY-MM-DD HH:mm" />
</div>
</div>
WHat I want to achieve is following :
When I select status (Accepted), I want to have approval date field automatically set to now.
In case I select another status rather than Accepted, the approval date is cleared.
I assume I have to write a sort of function in my component.ts class but not sure.
Can you please give me some pointers / leads ? Thank you!
I think I am having an issue with value binding. I have 2 dropdowns on my page currently. The rest of the page is using PrimeNg for UI and would like to make these dropdowns look the same as the rest of the page. How should I go about making this work.
One dropdown is a supervisor list.
<div class="ui-g form-group">
<label for="supervisors">Supervisors * </label>
<select
class="form-control"
id="supervisors"
required
[(ngModel)]="model.supervisor"
name="supervisor"
>
<option *ngFor="let sup of supervisors" [value]="sup">
{{sup}}
</option>
<div
[hidden]="supervisors.valid || supervisors.pristine"
class="alert alert-danger"
>
Supervisor is required
</div>
</select>
</div>
The other is a leave code list
<div class="ui-g-12 ui-md-1" id="test">
<label for="codes">Leave Codes * </label>
<select
class="form-control"
id="codes"
placeholder="Select Leave Code *"
required
[(ngModel)]="model.code"
name="code"
>
<option *ngFor="let cod of codes" [value]="cod">{{cod}}</option>
</select>
</div>
I have 2 arrays of values being called from my .ts file
supervisors = ['Alex',"Jones",'Joe','Rogan'];
codes = ['Personal Leave','Vacation Leave', 'Sick Leave'];
When I use the tags I just get an empty drop down. I tried just using initially but then I was not able to get the required fields to validate.
Did you import DropdownModule?
import {DropdownModule} from 'primeng/dropdown';
See the documentation, html binding should be
<p-dropdown [options]="supervisorList" [(ngModel)]="supervisor"></p-dropdown>
where supervisorList will be defined as SelectItem in controller and needs to be in a label + value format.
supervisorList: SelectItem[];
this.supervisorList= [
{label: 'Alex', value: 'Alex'},
...
];
I am trying to get some information by a select but I get a String and not the whole Object
My code is the following:
<!-- Select Scenario -->
<div class="form-group bottom">
<label class="col-md-4 control-label">{{ 'Scenario' | translate }}</label>
<div class="col-md-8">
<select class="form-control" #scenario (change)="getScenario(scenario.value);">
<option type="text" *ngFor="let scenario of scenarios" >{{scenario.Name}}</option>
</select>
</div>
</div>
but I get as a value the sceanrio.Name as a String.
I have tried to change the code for:
<option type="text" *ngFor="let scenario of scenarios" value="{{scenario}}">{{scenario.Name}}</option>
and
<option type="text" *ngFor="let scenario of scenarios" [ngValue]="scenario">{{scenario.Name}}</option>
with the aim of getting the object scenario as a value, but it does not work (i get [object Object]).
My scenario looks like:
export class Scenario {
Name: String;
Rec: [{
recName: String;
}];
IntConf: [{
DName: String;
}];
}
just Name is filled at that moment, but I would like to get the whole object (i guess with null in the paraments)
Any idea?
{{scenario.Name}} is mostly likely has an embedded object. Use a "|json" pipe to confirm like this {{ scenario.Name | json }}
To get an actual object binding you should use [ngvalue] instead of the plane HTML5 value.
Your result should look like this:
<option type="text" *ngFor="let scenario of scenarios" [ngvalue]="scenario">
{{scenario.Name}}
</option>
I have an template, where a service populates the values used in a select box. Like so:
<div class="form-group">
<label for="backings_select">Backing</label>
<select class="form-control"
required
name="backings_select"
(ngModelChange)="storeValueRedux($event, count)">
<option *ngFor="let backing of backings" [ngValue]="backing.id">{{backing.name}}</option>
</select>
</div>
The above works fine. So I figured, if the array backings only has one item, I might as well have angular auto select the one value that is available (for UI improvement)
So for a basic, hacky proof of concept I tried:
<div *ngIf="backings?.length == 1" class="form-group">
<label for="backings_select">Backing Single</label>
<select class="form-control"
required
name="backings_select"
(ngModelChange)="storeValueRedux($event, count)">
<option *ngFor="let backing of backings" [ngValue]="backing.id" selected="selected">{{backing.name}}</option>
</select>
</div>
<div *ngIf="backings?.length > 1" class="form-group">
<label for="backings_select">Backing Multiple</label>
<select class="form-control"
required
name="backings_select"
(ngModelChange)="storeValueRedux($event, count)">
<option *ngFor="let backing of backings" [ngValue]="backing.id">{{backing.name}}</option>
</select>
</div>
Now if backings.length == 1, the following html is rendered:
<option selected="selected" value="1: 1" ng-reflect-ng-value="1">nameValue</option>
And if backings.length > 1 the following html is rendered:
<option value="0: 1" ng-reflect-ng-value="1">nameValue1</option>
<option value="1: 2" ng-reflect-ng-value="2">nameValue2</option>
Now in theory, the above code should work, however when length==1 the html select box is not auto selecting the value with selected="selected". Have I missed anything, or is there any reason why the select is not auto selecting?
use [selected] instead of selected
<option *ngFor="let backing of backings" [ngValue]="backing.id" [selected]="backings.length === 1">{{backing.name}}</option>
without using ngIf and duplicating your code you can achieve the desired result like this:
<div class="form-group">
<label for="backings_select">Backing</label>
<select class="form-control"
required
name="backings_select"
(ngModelChange)="storeValueRedux($event, count)">
<option *ngFor="let backing of backings" [ngValue]="backing.id" [selected]="backings.length === 1">{{backing.name}}</option>
{{backing.name}}</option>
</select>
</div>