Angularjs Validation is not working when it first time

Question

I am new in angularjs and i am trying to validate while submitting a form, it is not working , but when i fill first input field and then submit it works and then again after clearing that field its all clear how to resolve this problem of validation.

Here is my html page

<form name="addAlbumForm" novalidate>
<div class="album panel panel-default" >

    <div class="panel panel-heading">
    <!-- <div class="alert alert-danger" role="alert" ng-show="addAlbumForm.date.$error.minlength">Date Too short</div> -->
    <div class="alert alert-danger" role="alert" ng-show="addAlbumForm_error">{{addAlbumForm_error}}</div>
    <input type="text" placeholder="Title...." size="20" ng-model="adding_album.title" style="width: 130px;"/>
        <div class="panel-title" style="float: right">
          <input type="text" name="date" ng-minlength="10" ng-required="true" placeholder="yyyy/mm/dd" size="10" ng-model="adding_album.date">
        </div>

    </div>
     <p>
    <div class="description">
    <p>
      <textarea ng-model="adding_album.description" placeholder="
      Description..." rows="4" style="width:100%"></textarea>
       </p>
       <p> <input type="text" placeholder="Name..." size="10" ng-model="adding_album.name"></p>
    </div>
    </p>

    <p >
      <button type="button" ng-click="addAlbum(adding_album)" class="btn btn-success"> Add New Albums</button>
    </p>
</div>

Here is my controller

    MyApp.controller('AlbumListController', function($scope){
      $scope.albums =[{ name: 'anand123', title: 'Weekend in Moderil',date:'12-01-2016',description :'abdkabkjasajsk sdsdsds dfdsfsdfsd '}] 
  $scope.addAlbum=function(new_album){
    if(!new_album.title)
      $scope.addAlbumForm_error= "Missing Title!";
    else if(!new_album.date || new_album.date.length <10)
       $scope.addAlbumForm_error= "Invalid Date!";
     else if(!new_album.description || new_album.description <10)
       $scope.addAlbumForm_error= "Description Too Short!";
     else if(!new_album.name)
       $scope.addAlbumForm_error= "Missing Name!";
     else{
        $scope.albums.push(new_album);
        $scope.adding_album={};
     }

  }

});

I got an error that Can not read property 'title' of undefined, but once I fill title then it starts working properly and i have also cleared the title filed.

Vaibhav · Accepted Answer · 2016-08-24 11:10:47Z

1

I just add the form using ng-init ex:

<form ng-init="adding_album={}; addAlbumForm_error=''">

answered Aug 24, 2016 at 11:10

Vaibhav

4856 silver badges12 bronze badges

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

Comments

eforte-nawaz · Accepted Answer · 2016-08-24 10:02:59Z

0

you should try using ng-init in the form tag, initialize your variables such as adding_album as {} and addAlbumForm_error as false

for eg: <form ng-init="adding_album='{}'; addAlbumForm_error=false">

answered Aug 24, 2016 at 10:02

eforte-nawaz

11 bronze badge

2 Comments

Vaibhav Over a year ago

Initial problem is solved but after adding this code i cant type anything in this title text box

Vaibhav Over a year ago

adding_album is not a string i just edit your code like this i got solution <form ng-init="adding_album={}; addAlbumForm_error=''"> thank you

Collectives™ on Stack Overflow

Angularjs Validation is not working when it first time

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related