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>

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

1 个答案: