0

我有一个表单，其中的字段会在单击按钮时动态添加。这是添加表单字段的功能

$scope.addFormField = function(){
    let container = document.getElementById('formFieldContainer');
    // a variable which keeps track of the number of fields added
    $scope.obj.fieldCount++;
    let formField = '<md-input-container><label>Mobile Number</label><input type="text" required name="mobileNo_' + $scope.obj.fieldCount + '" ng-model="obj.mobileNumberArr[' + $scope.obj.fieldCount +']" ng-pattern="/^[1-9]{1}[0-9]{9}$/" ng-style="form.mobileNo_' + $scope.obj.fieldCount + '.$valid ? {\'border-color\': \'green\',\'color\': \'green\'}:0"></md-input-container>';
    container.appendChild($compile(formField)($scope)[0]);
}

如果我直接在 html 中编写表单域代码，则 ng 样式会正确应用。但是，如果我使用上述函数添加表单字段，则不会应用 ng 样式。

为了让 ng-style 在动态添加的字段中工作，我还应该添加什么其他内容到我的代码中。

4

1 回答 1

0

您可以ng-style在变量中设置内容，然后在formField中使用它：

$scope.addFormField = function(){
    let container = document.getElementById('formFieldContainer');

    // SET VARIABLE BASED ON CONDITION
    let newstyle = condition ? "{\'border-color\': \'green\',\'color\': \'green\'}" : 0;

    // a variable which keeps track of the number of fields added
    $scope.obj.fieldCount++;
    let formField = '<md-input-container><label>Mobile Number</label><input type="text" required name="mobileNo_' + $scope.obj.fieldCount + '" ng-model="obj.mobileNumberArr[' + $scope.obj.fieldCount +']" ng-pattern="/^[1-9]{1}[0-9]{9}$/" ng-style="' + newstyle + '"></md-input-container>';
    container.appendChild($compile(formField)($scope)[0]);
}

查看演示：DEMO

于 2019-09-19T09:25:21.110 回答