分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angularjs – 新添加的md-input-container显示为无效，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

在提交表单并动态添加新的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: ''
       });
        }

});

单击“提交”,然后单击“添加行”,对于新添加的文本框,它显示红色,但不应显示.
任何形式的帮助都是值得的.单击提交然后添加行,如何以默认颜色显示,即不是红色.

解决方法

当您在表单中添加输入时,您不必更改名称,在错误消息中将始终具有该红色,因为它们引用相同的名称

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