Cannot read property of undefined (form validation) - angularjs

Question

I've searched Google but can't find the answer...

I have an md-select that looks like this:

<md-input-container class="md-block" flex-gt-sm>
     <label>Type</label>
     <md-select ng-model="f.type" placeholder="Type" select-clear>
           <md-option ng-repeat="f in ctrl.type" value="{{f}}">{{f}}</md-option>
     </md-select>
</md-input-container>

ctrl.type looks like this in my controller:

this.type = ["type1","type2"];

and I am also sending the md-select value to an object array like this:

var data = {
    kind: $scope.f.type,
 };

and then I am doing an http.post that is sending the data object to an api.

Now here is my question. I would like it that when the md-select is empty, and the users sends the data object that instead of getting the error Cannot read property 'type' of undefined that simply the data is sent but it has a value of null instead of undefined, and then when the md-select is populated it simply sends the value to the api. How would I do that? Would I have to do form validation? Is there a simple way of doing this because I have about 10 of the md-selects that I have to send.

Thank you.

Based on the code snippets you have posted it looks like you are mixing "Controller as" syntax with $scope. I'm not an Angular expert, but is that even possible? — Lex
– Lex, Commented Mar 8, 2016 at 17:56

Naga Sandeep · Accepted Answer · 2016-03-08 17:55:14Z

1

You can create a empty/dummy option above your md-option with something like

<option value='null'></option>
<option ng-repeat="f in type" value="{{f}}">{{f}}</option>

But I think, empty element is coming in the browswer because you are not initializing your f.type. If you properly initialize your f.type, you don't even get that empty element and its undefined value. You can initialize as shown below.

<select ng-model='f.type' ng-change='toggleSelection()' ng-init='f.type = type[0]'>

answered Mar 8, 2016 at 17:55

Naga Sandeep

1,4312 gold badges13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jesus Gilberto Valenzuela · Accepted Answer · 2016-03-08 17:14:31Z

0

Try to use ng-options instead of ng-repeat.

For example:

<md-select ng-model="f.type" 
    placeholder="Type" select-clear
    ng-options="f as f in ctrl.type">    
</md-select>

answered Mar 8, 2016 at 17:14

Jesus Gilberto Valenzuela

3863 silver badges9 bronze badges

Collectives™ on Stack Overflow

Cannot read property of undefined (form validation) - angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related