i am trying to add a popup form using an ng-template which have multiple selects .on ngOnInit() i add all the values as null
some of these selects are shown based on the previous select value using ngif
the problem is that when i change the value the second select go away but its value still the same this is my code :
<div *ngIf="cosForm.value.customer=='617e7d83c68272eba7c36c13'">
<div class="form-group text-right">
<label class="col-form-label" for="service">customer</label>
<select ng-model="selectedItem" class="form-control" placeholder="customer" autocomplete="customer"
formControlName="customer" required
[ngClass]="{ 'is-invalid': submitted && f.customer.errors, 'is-valid': f.customer.touched && !f.customer.errors }">
<option *ngFor="let customer of myCustomers" value="{{customer._id}}">{{customer.name}}</option>
</select>
<div *ngIf="submitted && f['customer'].errors" class="invalid-feedback">
<div *ngIf="f['customer'].errors.required">customer is required</div>
</div>
</div>
i want when i change the first select value the second ng select value set to null
i tried to use
<select onChange="cosForm.value.customer=null"> </select>
on the first select but i didnt get any result
i wanted to use :<div *ngIf="cosForm.value.customer=='!617e7d83c68272eba7c36c13'">
but i couldn't figure out how to affect the value
BTW: even if i change the first select, without changing the second ,i think the second select value is automatically changed because my submit button change to invalid and it became valid only when i fill the second select
If you are trying to invalidate another select based on one select then you can listen to changes in the first select tag with this
form.controls.customer.valueChanges.subscribe(()=>{
// Set the value of the second select to null here
form.controls.secondSelect.reset()
})
Related
I am trying to make a form in Angular with a select box whose values are taken from an array. I also need the form to show inputs based on the value of that select. This is the code:
<select #freq formControlName="freq" class="m-2">
<option disabled>Select</option>
<option value="">Select Option</option>
<option *ngFor="let x of freq_list" [ngValue]="x">{{x}}</option>
</select>
<div *ngIf="freq.value!=''">
{{freq.value}}
<div *ngFor="let x of parameter_config[freq.value]">
<input type="number" formControlName="input1">
</div>
</div>
where freq_list is a simple string[]=['option1',option2',option3'] and parameter_config is a map {[id:string]: string[];}where the id is the a value of freq_list.
And this is the form creation:
form=this.fb.group({
freq:'',
});
Everything works except that the value returned by the selected option is not simply 'option1' but it is preceded by the order in the list (e.g. '1: option1', '2: option2', ...)
Is there something I am missing? How is this the default behavior?
replace ngValue with value
<option *ngFor="let x of freq_list" [ngValue]="x">{{x}}</option>
should be
<option *ngFor="let x of freq_list" [value]="x">{{x}}</option>
I need the value that is obtained from my db is selected. Inspect in html, I see that the value of one of the <option> changes to: selected="selected" but in the select it is not really selected.
Here is my code:
<select chosen class="form-control" name="state" ng-model="product.state" ng-change="updateData()" placeholder-text-single="'Select one'" required >
<option value="">Select one</option>
<option ng-repeat='i in statesList' value="{{i.id}}" ng-selected="i.id == product.state.id">{{i.name}}</option>
</select>
I tried to change the value of ng-model by ng-model="product.state.id" and it works, it stays selected, but of course, the data is not saved later.
statesList is the array of objects that are retrieved from a mongodb database collection.
I have read other similar questions but I can not solve my problem with them. I am new at angular and there are complicated problems for me. What solution is there? How can i fix it?
No need to have ng-change handler.
Try below approach by using ng-options. The model will always have latest selected value.
<select name="state" id="state"
ng-options="option.name for option in statesList track by option.id"
ng-model="product.state"></select>
In my project i have handled selects control with Reactive form, you can try like this
this.testForm = this.formBuilder.group({
"testselectControl": []});
in html
<select id="test1" formControlName="testselectControl"
class="form-control p-0 start-date-input-box ">
<option *ngFor="let val of listValues" [value]="val.id">
{{name.name}}</option>
</select>
when you receive data set value like this
this.testForm .get("testselectControl").setValue(listValues ? (listValues.find((value) => (value.id.trim() ==selectedValueId) : "0");
<select multiple ui-select2="{allowClear: true}" ng-
model="selectedCountries" data-placeholder="Countries">
<option ng-repeat="country in countries" value="{{country.id}}">
{{country.name}}</option>
</select>
<button ng-click="fetch()" class="btn btn-primary pull-right">Apply</button>
the solution of adding priority worked
I have a form that spans multiple tabs in a TabStrip control. However, when the form is validated (e.g. f.valid), not all controls are considered when the validation is evaluated.
For example, if an input field is on tab 1 that is marked as "required" and the save action is called when the focus is on tab #3, the form will read as invalid since the required field is not in view. If the focus is on Tab #1, all works as expected.
I understand why this behavior is occurring, but I wanted to see if there was any suggested workaround.
Thanks!
Update
I created a plunkr that shows the basic issue. It is actually a little backwards from the problem I described, but it shows how the form ignores the fields on tabs other than the one displayed during validation: Plunkr Example
The template code looks like this:
<form #f="ngForm" (ngSubmit)="save(f)">
<kendo-tabstrip>
<kendo-tabstrip-tab [title]="'Paris'" [selected]="true">
<ng-template kendoTabContent>
<input type="text" name="controlOne" id="controlOne" [(ngModel)]="myModel.controlOne" required>
</ng-template>
</kendo-tabstrip-tab>
<kendo-tabstrip-tab [title]="'New York City'">
<ng-template kendoTabContent>
<input type="text" name="controlTwo" id="controlTwo" [(ngModel)]="myModel.controlTwo">
</ng-template>
</kendo-tabstrip-tab>
<kendo-tabstrip-tab [title]="'Tallinn'">
<ng-template kendoTabContent>
<input type="text" name="controlThree" id="controlThree" [(ngModel)]="myModel.controlThree">
</ng-template>
</kendo-tabstrip-tab>
</kendo-tabstrip>
<button type="submit">Save changes</button>
</form>
<div>
Valid when saving: {{ isValid }}
</div>
I created a search container table that contains a column checkbox type, i.e.
<liferay-ui:search-container-column-text
name="territoriale"
orderable="<%= true %>"
>
<input type="checkbox" id="territoriale" checked="<%= cmt.getTerritoriale() == 1 %>" />
</liferay-ui:search-container-column-text>
This table is declared inside a jsp included using liferay-util:include, but can also be refreshed in the next steps by click on search button.
What happen is that when the table appears for the first time, I see that column just with text (value is "1"), when I click search button that runs the ajax call, the resource action return the correct checkbox in column.
Any ideas?
Below some screen shot
Thanks
Column after page load
Column after click on search button
This works fine on 6.2 CE ga5:
<liferay-ui:search-container-column-text
name="checkbox"
orderable="<%= true %>"
>
<% String checked = (Math.random() < 0.5) ? "checked" : ""; %>
<input type="checkbox" <%= checked %>/>
</liferay-ui:search-container-column-text>
So the root cause of your issue should be somewhere else. You may output cmt.getTerritoriale() into html to check its content.
I think, that checked="<%= cmt.getTerritoriale() == 1 %>" is not correct,
you may use checked or nothing.
See here about using checked attribute.
You can also use rowchecker as was mentioned in the comments of Pankajkumar Kathiriya.
Hay all,
I am trying to validate a select in kohana 3.0 and I am using the necessary rules. However the validation does no "kick in" when the user does not make a selection.
<select id="discipline" name="discipline" >
<option value="0"> -- Select One -- </option>
<option value="-2">Information Technology and Engineering</option>
<option value="4">Business and Training Seminars</option>
</select>
That was my select, now i have applied these rules to the post array before i check for validation errors.
$post = Validate::factory($_POST)
->rule('discipline', 'not_empty')
->rule('discipline', 'numeric');
When I submit the form without making a selection, the form submits and the rules should stop it.
Any ideas ?
Your still putting a value for the first one, as 0. Leave the value as value="". 0 is numeric and considered not empty.
Replace 0 with blank string
Add ->rule('discipline', 'in_array', array(array(-2, 4))); to check that selected discipline is within valid collection.
string empty first option
<select name="fruit" required>
<option value="">select fruit</option>
<option value="banana">banana</option>
</select>
then some css may help
form:invalid button[type="submit"], form:invalid input[type="submit"] {
opacity: 0.5;
cursor: default;
}