2

我使用 Formly 在 angularJS 中创建表单

这是我的领域

$scope.postFields = [
    {
        key: 'title',
        type: 'input',
        templateOptions: {
            label: "Title",
            // required: true,
            minlength: 2,
        },
        validation: {
            messages: {
                required: function(viewValue, modelValue, scope) {
                    return scope.to.label + ' is required'
                }
            }
        }
    }
]

我正在尝试按如下方式访问我的字段

    function failure(response) {
    console.log("failure", response)

    _.each(response.data, function(errors, key) {
        _.each(errors, function(e) {
            $scope.form[key].$dirty = true;
            $scope.form[key].$setValidity(e, false);
        });
    });
}

我的正式形式

<formly-form form="postForm" model="model" fields="postFields" class="col-md-4">
    <button type="submit" class="btn btn-primary" ng-click="addPost()">Submit</button>
</formly-form>

但当然我得到了这个错误：

TypeError: Cannot read property 'title' of undefined

在这条线上

$scope.form[key].$dirty = true;

你们中有人知道如何以正确的方式引用创建的正式字段吗？

4

1 回答 1

3

如果您希望能够引用表单中的字段，您可以为name您的字段提供一个属性。name是默认生成的。这是 angular-formly 提供的好处之一（您不必考虑它）。但是，如果您想直接使用特定的key（如您所愿）引用它，那么最好自己提供一个。

所以你会做这样的事情：

$scope.postFields = [
    {
        key: 'title',
        name: 'title',
        type: 'input',
        templateOptions: {
            label: "Title",
            // required: true,
            minlength: 2,
        },
        validation: {
            messages: {
                required: function(viewValue, modelValue, scope) {
                    return scope.to.label + ' is required'
                }
            }
        }
    }
]

或者，您可以创建一个fieldTransform自动执行此操作（只需分配与密钥相同的名称）。或者在您的错误处理程序中，您可以像这样NgModelController从字段的formControl属性中查找：

function handleError(fields, response) {
  _.each(fields, function(field) {
    if (response.data[field.key]) {
      field.formControl.$setDirty()
      _.each(response.data[field.key], function(e) {
        field.formControl.$setValidity(e, false)
      })
    }
  })
}

这可能是最好的解决方案 :-) 祝你好运！

于 2015-11-03T16:41:16.323 回答