新添加的md-input-container显示为无效

Question

在提交表单,并动态地添加新的MD-输入容器的文本框,它显示的文本框为红色,但为用户尚未接触文本框,它应该在默认的颜色显示.请在此处找到问题:此处的 代码笔链接

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>