md-input-containerを新しく追加すると無効と表示される

Question

フォームを送信して新しいmd-input-containerテキストボックスを動的に追加すると、テキストボックスは赤色で表示されますが、デフォルトの色で表示します。 Code pen link here

HTML：：

<div ng-controller="AppCtrl" layout="column" ng-cloak="" class="inputdemoErrors" ng-app="MyApp"> 

    <md-content layout-padding=""> 
    <form name="projectForm" novalidate> 

     <md-input-container class="md-block" ng-repeat="dep in depFiles"> 
     <label>Description</label> 
     <input md-maxlength="30" required="" md-no-asterisk="" name="description" ng-model="project.description"> 
     <div ng-messages="projectForm.description.$error"> 
      <div ng-message="required">This is required.</div> 
      <div ng-message="md-maxlength">The description must be less than 30 characters long.</div> 
     </div> 
     </md-input-container> 


     <div> 
     <md-button type="button" ng-click="addNew();">Add Row</md-button> 
     <md-button type="submit">Submit</md-button> 
     </div> 

     <p style="font-size:.8em; width: 100%; text-align: center;"> 
     Make sure to include <a href="https://docs.angularjs.org/api/ngMessages" target="_blank">ngMessages</a> module when using ng-message markup. 
     </p> 
    </form> 
    </md-content> 

</div> 

<!-- 
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license. 
--> 

JS： ここでの問題ご覧ください提出し、[追加]行をクリックして上の

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 

.controller('AppCtrl', function($scope) { 
/* $scope.project = { 
    description: 'Nuclear Missile Defense System', 
    rate: 500 
    };*/ 
    $scope.addNew = addNew; 
      $scope.depFiles = []; 
     addNew(); 
     function addNew(){ 
     $scope.depFiles.push({ 
      name: '' 
     }); 
     } 

}); 

クリックして、新しく追加されたテキストボックスのために、それが赤く表示されます色は表示されません。 どんな種類のヘルプでも感謝します。 [送信]をクリックして行を追加すると、デフォルトの色で表示する方法、つまり赤で表示することはできません。

Answer 1

あなたのフォームに入力を追加すると、エラーメッセージで、名前を変更する必要はありませんが、常に彼らが同じ名前

<md-input-container class="md-block" ng-repeat="dep in depFiles"> 
     <label>Description</label> 
     <input md-maxlength="30" required="" md-no-asterisk="" name="description" ng-model="project.description"> 
// 
// yours name is equals in all 
// 
     <div ng-messages="projectForm.description.$error"> 
// 
// Will always have the same error if you do not change the name for each input 
// 
      <div ng-message="required">This is required.</div> 
      <div ng-message="md-maxlength">The description must be less than 30 characters long.</div> 
     </div> 
     </md-input-container>