如何将验证应用于动态添加的字段到表单

Posted 2021-04-02

我有两个字段的表单，直到那些字段填充了一些文本，我的提交按钮将被禁用但现在如果我动态添加第三个字段，JS将不支持动态添加的第三个字段的验证。

链接https://jsfiddle.net/vikrantkki/zzhgaguz/57/

 <button ng-click="adddynamicfield()">add dynamic field<button>        
            <form name="dynamicform" novalidate="true">
            <input type ="text" dynamic-name name="name" ng-model="dynamicform1.name"  required>
            <input type ="text" dynamic-name name="age"  class="age" ng-model="dynamicform1.age" required >
            <button type="submit" ng-disabled="dynamicform.$invalid">submit</button>
            </form>

答案

问题是你没有编译新添加的html。你可以研究$compile，它应该解决这个问题。

但我建议您使用数组来表示动态字段，这样您就可以更轻松地获取模型值。

fiddle

$scope.dynamicFields = [];

$scope.adddynamicfield = function() {
  var index = $scope.dynamicFields.length;
  $scope.dynamicFields.push({
    name: 'field' + index,
    model: '',
    className: 'field',
  });
}