3

UPDATE: I've added a custom directive which 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 awesome, however I've been pulling my hair for hours on this and can't figure out what's causing the issue.

The workflow of the UI that I'm trying to achieve is for a user to click on a step, which then shows an input field, which he has to fill in (validation is required so I'm trying to use ng-required/ng-minlength).

If it passes the validation it should show a tick icon and activate the next step which works the same way.

Now the issue is that I can access the form element, but the object I get is a DOM object and it doesn't include the $valid property, which I need for checking whether the form/field is valid.

17:20 lines are:

console.log($scope.step1); //undefined
console.log(step1); //dom object
console.log(step1.value); //dom object
console.log(step1.value.$valid); //undefined

I've been googling a lot and many questions on SO say that I should be able to access the form through the $scope variable, but unfortunately I can't, though it is accessible via a simple variable name "step1" (dynamically generated form name). I can also access the "value" named field, but it's still just a DOM object so no $valid is available.

JSFiddle: http://jsfiddle.net/Iber/vtvnquee/

My questions are:

  • Am I on the right path in terms of Angular style of coding?
  • Is my "wizard app" code logical? I mean, maybe I should use a different approach to build those steps?
  • What am I doing wrong and why can't I access the $valid properties?

Really want to understand Angular because it seems like a proper framework for large apps and the way to go for me.

Ignas
  • 1,965
  • 2
  • 17
  • 44
  • Here is how you can do this with dynamic form name fields. http://stackoverflow.com/questions/27071413/dynamic-form-name-attribute-input-type-text-name-variable-name-in – SoEzPz Nov 21 '14 at 22:49

1 Answers1

6

Form validation in angular relies on two things:

  1. Your form (or ng-form) element must have a 'name' attribute.

    <form name="myform">

  2. Your input (or select) fields must have a 'name' attribute and an ng-model.

    <input type="text" name="name" ng-model="name" />

The reason that your form and input fields need a name attribute is because that is how you will find the models on $scope and perform client side validation.

For example

 $scope.myform.name.$error.required
 $scope.myform.name.$valid
 $scope.myform.name.$invalid

[EDIT]

I see that you've already followed these guidelines in your fiddle.

The reason that it does not work is because the name attribute cannot be an interpolated value.

Michael Kang
  • 52,003
  • 16
  • 103
  • 135
  • But based on solutions on other questions like: [this](http://stackoverflow.com/a/21337430/857776). It should be possible to use dynamic names with a custom directive. I can access the step1.step1 field, but it still gives me the DOM object. [JSFiddle](http://jsfiddle.net/Iber/vtvnquee/) updated. – Ignas Aug 14 '14 at 09:09
  • turns out I had to move the
    element outside the ng-repeat for it to start working. the form object wasn't in the scope because of that. Anyway, thanks for the answer, using dynamic name directory I managed to fix it.
     – Ignas Aug 14 '14 at 12:01