I have a doctor list. And each doctor has his procedures. How can I apply selected doctor's procedures to procedures selection.
html
<div class="form-group">
<label for="doctors">Doctor</label>
<select [formControl]="selectControl" class="form-control" id="doctors">
<option value="doctor"*ngFor="let doctor of doctors">{{doctor.username}}</option>
</select>
</div>
<div class="form-group">
<label for="procedures">Select Procedure</label>
<select *ngIf="selectControl.valid" class="form-control" id="procedures">
<option *ngFor="let p of selectControl.value.procedures">{{p}</option>
</select>
</div>
.ts
selectControl: FormControl = new FormControl();
For select control, the option value has to be binded to [ngValue] instead of value property.
Here is a working sample showing how to bind to doctors array and then how to retrieve the value of the selectedProcedure.
PS - Instead of creating a formControl, I personally find it more convenient to use formBuilder instead
Related
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'},
...
];
In my dropdown for now all of the products are displayed, and I have like 200 products there, and dropdown is pretty large, I would like to display only 5-10 product for example, so it might look like this:
So basically all of the products would be there available for search, BUT ONLY 5 - 10 of them would be displayed, so dropdown would look more cleaner..
This is pure html of dropdown:
<div class="col-sm-6">
<select class="form-control dash-form-control select2" style="width: 100%;">
<option selected disabled>Search...</option>
<option>258-656 - Product 1 0,5l</option>
<option>358-656 - Product 2 0,75l</option>
<option>428-656 - Product 3 1kg</option>
</select>
</div>
And this is Angular modified:
<div class="col-sm-6">
<select class="form-control dash-form-control select2" style="width: 100%;">
<option selected disabled>Search...</option>
<option *ngFor="let p of products;" [value]="p.id">{{product.title}}</option>
</select>
</div>
And this angular way of course display all the values that are contained in products array.. and that's not it:)
Any kind of help would be awesome
Thanks guys
Cheers
In your component, import FormControl from #angular/forms and create an observable that takes a Product[].
public productCtrl: FormControl = new FormControl();
public products$: Observable<Product[]>;
now introduce a cold-observable that listens to input on the form-control, but until then, display the first 5 items.
this.products$ = this.productCtrl.valueChanges.pipe(
debounceTime(500),
startWith(null)
map(this.filterOrFirstFiveElements)
// implement a function
// that filters and returns your current product array or returns first five elements
// when a filter is provided and you get more that five elements, you can still only return first five elements of that result
);
Now in your template go ahead and adjust it to use the observable and mark the control as form-control.
<div class="col-sm-6">
<select class="form-control dash-form-control select2" style="width: 100%;">
<option selected disabled>Search...</option>
<option *ngFor="let p of products$ | async;" [value]="p.id">{{product.title}}</option>
</select>
</div>
<input type="text" [formControl]="productsCtrl" />
You need to import reactive-forms module into your module in order to be able to use [FormControl] directive.
Not directly related: As a user I would be completely confused when I see only five elements, use the filter and get a completely different result. An autocomplete is maybe a better solution. Show nothing, until user searches for a product.
Use Pipe
filter.pipe.ts
transform(value: any, args?: any): any {
console.log(args)
if(!value){
return null;
}
let arg=args ? args :5;
let limitTo=value.length >5 ? value.slice(0,arg) : value ;
return limitTo;
}
HTML
<div *ngFor="let d of data |filterpipe:5">
{{d.name}}
</div>
Example:https://stackblitz.com/edit/angular-r3kpxc
You could just use an index:
<div class="col-sm-6">
<select class="form-control dash-form-control select2" style="width: 100%;">
<option selected disabled>Search...</option>
<ng-container *ngFor="let p of products; let i = index;" >
<option *ngIf="i < 5" [value]="p.id">{{product.title}}</option>
</ng-container>
</select>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="is_present">Is Present?</label>
<div class="col-md-4">
<select id="is_present" name="is_present" class="form-control" *ngIf="candidates.is_present === true">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
</div>
I have this code in my html component. I receive a boolean data from API, I would like to know what the best way to use *ngIf to add selected in option tag if the API data is true or false.
Slightly change to Rahul's answer, because from what I understand, you are receiving a boolean value that is should not be the same as candidates.is_present. Therefore store the boolean value to a variable, e.g bool, and then just have the [(ngModel)]="bool" in your select:
<select name="is_present" [(ngModel)]="bool" *ngIf="candidates.is_present">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
Just use candidates.is_present
<select id="is_present" [(ngModel)]="defaultValue" name="is_present" class="form-control">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
and in TS file,
if(candidates.is_present){
this.defaultValue = 'Yes';
}else
{
this.defaultValue = 'No';
}
as i can understand from question you want to select the value in select box based on some candidates.is_present. So here you need to bind the data using [(ngModel)]="candidates.is_present" ,and be sure to include FormsModule in your imports. we use *ngIf when we want our element to remove/add to dom based on some conditions.hope you got the answer
<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>
I have the following HTML on my page, where I have 2 select elements. I want them both to be required. I want the second element currentModel to remain disabled until the first one is selected with a value other than Year, which is my default value.
<select class="form-control input-xsmall select-inline" data-ng-model="currentYear" >
<option>Year</option>
<option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>
<select class="form-control input-xsmall select-inline" data-ng-model="currentModel">
<option>Model</option>
<option ng-repeat="model in models" value="{{model.niceName}}">{{model.name}}</option>
</select>
Could somebody help me with how to validate the select elements like this?
All you need to use is ng-model and ng-options instead of manually creating options via ng-repeat. Let angular create options for you.
<select class="form-control input-xsmall select-inline" data-ng-model="currentYear"
ng-options="year for year in years track by year">
<option value="">Year</option>
</select>
<select class="form-control input-xsmall select-inline" data-ng-model="currentModel"
ng-disabled="!currentYear"
ng-options ="model.niceName as model.name for model in models track by model.niceName">
<option value="">Model</option>
</select>
Plnkr
ng-options="year for year in years track by year" follows the syntax label for value in array
ng-options ="model.niceName as model.name for model in models track by model.niceName" follows the syntax select as label for value in array
Just set the ng-model for both the selects. In case of models since i used select as syntax (model.niceName as model.name) the currentModel will have niceName property of the selected item. if you remove select as part from the model it will have the respective model object.
set an ng-disabled on the 2nd select based on value of currentModel
since there is a track by bug with ng-select when dealing with objects we need to go with as syntax
ng-disabled="currentYear == -1" select your default value by doing $scope.currentYear = -1
This will make the second select box disabled if the currentYear model value is '-1'
<select class="form-control input-xsmall select-inline" data-ng-model="currentYear" >
<option value="-1">Year</option>
<option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>
<select class="form-control input-xsmall select-inline" data-ng-model="currentModel"
ng-disabled="currentYear == 'Year'">
<option>Model</option>
<option ng-repeat="model in models" value="{{model.niceName}}">{{model.name}}</option>
</select>
Here is Plunkr example: http://plnkr.co/edit/LIAqMq4TEz9xOCUGPAUs?p=preview