AngularJS - cannot access $ valid on dynamic inputs
UPDATE: I added a custom directive that allows me to access the input with a dynamically generated name, but $ valid is still undefined.
I'm very new to Angular (trying to switch from jQuery) and I find it pretty amazing, however I've been pulling my hair around for hours and can't figure out what's causing the problem.
The UI workflow I'm trying to achieve is to click through a step, which then shows an input field that it should fill in (validation required, so I'm trying to use ng -Required / ng-MinLength).
If it passes validation, it should show a checkmark icon and activate the next step, which works the same.
Now the problem is that I can access the form element, but the object I am getting is a DOM object and it doesn't include the $ valid property that I need to validate the form / field.
17:20:
console.log($scope.step1); //undefined
console.log(step1); //dom object
console.log(step1.value); //dom object
console.log(step1.value.$valid); //undefined
I have talked about the problems many times and many questions on SO say that I should be able to access the form through the $ scope variable, but unfortunately I cannot, although it is accessible through the simple variable name "step1" (dynamically generated form name ). I can also access the "named" field, but it is still only a DOM object, so there is no valid $ value.
JSFiddle: http://jsfiddle.net/Iber/vtvnquee/
My questions:
- Am I on the right track for Angular coding style?
- Is the "magic app" code logical? I mean, maybe I should use a different approach to create these steps?
- What am I doing wrong and why can't I access valid properties?
Really want to understand Angular because it seems like the right framework for large applications and the way to go after me.
source to share
Form validation in angular is based on two things:
-
The form element (or ng-form) must have a 'name' attribute.
<form name="myform">
-
Input (or selection) fields must have 'name' attribute and ng-model.
<input type="text" name="name" ng-model="name" />
The reason your form and input fields need to have a name attribute is because it is you who will find the models in the $ scope and do client side validation.
for example
$scope.myform.name.$error.required
$scope.myform.name.$valid
$scope.myform.name.$invalid
[EDIT]
I see that you have already followed these rules in your violin.
The reason it doesn't work is because the name attribute cannot be an interpolated value.
source to share