I'm having trouble with a form using angularjs/php/mysql to make a quite simple CRUD.
My form pass correctly the text inputs but I can't pass the <select> value.
The ng-option expression below is wrong but I can't find how to write it.
<div ng-controller="formController">
<form ng-submit="addVinyl()" novalidate class="simple-form">
Owner: <select ng-model="vinyl.owner" ng-options="user.name for user in users"></select><br />
Title: <input type="text" ng-model="vinyl.name" /><br />
Artist: <input type="text" ng-model="vinyl.artist" /><br />
<input type="submit" value="Add Vinyl" />
</form>
</div>
gives this html:
<option value="0">hey</option>
<option value="1">hoy</option>
<option value="2">hay</option>
My php file gets the good values of the text inputs but doesn't get the '0', '1', '2' or the 'hey', 'hoy', 'hay'... I tried to display vinyl.ownerand I got {"NAME":"hey"} for the first option selected.
ng-options is not the same as ng-repeat
The correct syntax for your purpose is :
ng-options="user.name as user.name for user in users"
This is due to the fact that you need a value for the attribute value, and that you need a "display text".
find more information inside documentation :
https://docs.angularjs.org/api/ng/directive/ngOptions
Related
I have validation issue if i use k-ng-model on field that field is not required with Angularjs validation , User can submit the form so below code field is required even i dont select the value user can still submit the form.. Any idea how to solve it ?
main.html
<div class="row">
<div class="form-group col-md-12">
<label for="themesList" class="required col-md-4">Themes:</label>
<div class="col-md-8">
<select class="multiselect" kendo-multi-select="themes"
k-options="challengThemesOptions" data-text-field="'text'"
data-value-field="'id'" name="themesList"
k-ng-model="challengesDTO.themesKyList" required
id="themesList"></select>
<p class="text-danger" ng-show="addChallengeForm.themesList.$touched && ddChallengeForm.themesList.$error.required">Theme(s) is required</p>
</div>
</div>
</div>
You can use ng-model with k-ng-model, Try assigning ng-model to a seperate variable and use ng-required.
<select class="multiselect" kendo-multi-select="themes"
k-options="challengThemesOptions" data-text-field="'text'"
data-value-field="'id'" name="themesList"
k-ng-model="challengesDTO.themesKyList" ng-model="challengesDTO.themesKyListValue" ng-required
id="themesList"></select>
This solution worked for me: kendo ui, angular require validation for numeric text box
Just create a hidden input for the each kendo widget and bind the model from your k-ng-model also to the ng-model of the hidden field. The k-ng-model seems to be no NgModelController, which is why the validators cannot hook into the models $validators and do their work.
<input kendo-date-time-picker k-ng-model="$ctrl.event.endDate"></input>
<input type="hidden" name="endDate" ng-model="$ctrl.event.endDate" required></input>
Question
I was wondering what the AngularJS "best practice" way of getting a label for a field is. With jQuery you just query using a "label for" query then extract the text. While it's possible to do it this way with AngularJS, something just doesn't feel right about it.
Assume you have something like this in your HTML:
<form name="MyForm" ng-controller="Ctrl">
<label for="MyField">My spoon is too big:</label>
<input type="text" size="40" id="MyField" ng-model="myField" />
<br /><br />
You entered {{ myField }} for {{ myField.label }}
</form>
The controller internal is pretty simple:
$scope.myField = 'I am a banana.';
Basically I want to populate the myField.label in the output with "My spoon is too big."
What I'm Doing Now
All I am doing right now is executing a query that pulls the data similar to the jQuery methodology ($("label[for='MyField']")). Then, if that doesn't exist I am just pulling the placeholder text. It works, but it seems like a bit of overhead.
What I'm Trying to Accomplish
I want some custom form validation and I want to include the label in the message. I just need to pull the label text so that I can write it extremely generically and then not have to worry about people switching i18n data in dynamically later in the game.
Fiddle
Per the suggested solution:
https://jsfiddle.net/rcy63v7t/7/
You change your HTML to the following:
<label for="MyField">{{ myFieldLabel }}</label>
<input type="text" size="40" id="MyField" ng-model="myField" />
and your JS to the following:
$scope.myFieldLabel = 'My spoon is too big:';
then later, you can get/set its value just as easily:
if ($scope.myFieldLabel === 'My spoon is too big:') {
$scope.myFieldLabel = 'New label:';
}
Note that new AngularJS best practices call for always using a "dot" in a field reference. It would fit perfectly here if you did something like:
<label for="MyField">{{ myField.label }}</label>
<input type="text" size="40" id="MyField" ng-model="myField.value" />
and JS:
$scope.myField = {
value: '',
label: 'My spoon is too big:'
};
Then you can always easily access $scope.myField.label and $scope.myField.value.
Let's say in your controller you have a scope variable like
$scope.myField = {};
$scope.myField.label = "Fruit name";
and your template is like
<form name="MyForm" ng-controller="Ctrl">
<label for="MyField">{{myField.label}}</label>
<input type="text" size="40" id="MyField" ng-model="myField.value" />
<br /><br />
You entered {{ myField.label }} for {{ myField.label }}
</form>
By this field label will come dynamically. Apply custom validation in input field as per your requirement.
Hope I understand exactly what you wants.
Just put your label text in the input title and you can use a "#" directive. You can also use this to make sure the label id matches.
<label for="{{myfield_control.id}}">{{myfield_control.title}}</label>
<input type="text" size="40" id="MyField" ng-model="myField" title="My spoon is too big:" #myfield_control >
<br /><br />
You entered {{ myField }} for {{ myfield_control.title }}
myField is your ngModel. myfield_control is a reference to your input control.
In my form i got a dropdown with Yes / NO option , when user selects yes additional input box will be displayed and allows user to enter some value input box.
how can i validate input box using angularjs ngmessages only if it is visible or value in dropdown is 'Yes'?
html code
<div class="col-xs-8">
<select ng-model="userAvailable">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
<input ng-show="userAvailable == 'yes'" placeholder="If yes , add name?" type="text" class="form-control" />
</div>
Thanks in advance.
Try using ng-if instead of ng-show. ng-show removes it from the DOM so the validation doesn't execute on it. ng-show just hides it.
<input ng-if="userAvailable == 'yes'" placeholder="If yes , add name?" type="text" class="form-control" />
I want to set a input text field of formular from JSON object, which is value of select option. I have a data in AngularJS controller, after selecting combobox, data is changed, but text field doesn't be filled.
https://github.com/lijunwu001/jstree_with_select.git
Here is demo link on github.
In general it's wrong approach. To see your error you can change your code from
<div ng-repeat='node in vm.selected'>
ID: <input type='text' ng-attr-value='{{ node["id"] }}' />
Description: <input type='text' ng-attr-value='{{ node["text"] }}' size='35'/><br />
</div>
To:
<div ng-repeat='node in vm.selected track by $index'>
Just symbol: <input type='text' ng-attr-value='{{ node }}' />
</div>
It looks strange, doesn't it? It's because you cant bind object to "select" like
<select ng-model='vm.selected' required>
After your click on "select" option your value of vm.selected is just string, but not an object. And you are doing ng-repeat with symbols of this string.
You could use the ng-change directive
I'm new to angularjs and here is a dumb question
View:
<select id="Select1" ng-model="tld" class="form-control ">
<option value="net" data-id="2">.net</option>
<option value="vn" data-id="3">.vn</option>
</select>
<input type="button" class="btn btn-test" ng-click="checkDomain(newDomain,tld)" value="CheckDomain">
On controller:
I can get the tld value(net or vn) fine, but how can i get the data-id associated with the clicked item in Select ?
Most of the time I have an array bound to the select box, seems like a better approach. But, you could try to have a json object as the value argument, like <option value="{ text: 'net', id: 2 }">.net</option>.