Question

我是angularjs的新手，我正在尝试验证提交表单时，它不起作用，但是当我填写第一个输入字段然后提交它工作然后再清除该字段之后再清楚如何解决这个问题验证问题。

这是我的html页面

<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>

这是我的控制器

    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={};
     }

  }

});

我收到错误无法读取属性＆＃39;标题＆＃39;未定义的，但是一旦我填写了标题，它就会开始正常工作，我也清除了提交的标题。

Answer 1

我只是使用ng-init添加表单例如：

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

Angularjs Validation第一次没有工作

1 个答案: