Re-adding md-input-container appears as invalid

Question

When a form is submitted and new text fields are added, md-input-container displays a red text field dynamically, but as the user does not touch the text field, it should be displayed by default. Please find here: Link to link for code 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: '' }); } }); 

Click Submit, and then click Add Row to add a new text box, it is displayed in red, but it should not be displayed. Any help is noticeable. Click on submit, and then add a line, as it can be displayed in the default color, that is, not in red.

Answer 1

When you add input to your form, you will not need to change the name, the error message will always be red because they refer to the same 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>