Question

我正在尝试在Angular 2中实现一个模型驱动的表单。我的数据模型的结构如下：

archive (FormGroup)
    name (FormControl)
    description (FormControl)
    connection (FormGroup)
        url (FormControl)
        authentication (FormGroup)
            username (FormControl)
            password (FormControl)

在此数据模型中，顶级名称是必需的，但说明字段是可选的。我可以应用一个必需的验证器来命名，并省略描述中的验证器。

对于连接，我希望它是可选的，但如果存在连接，则其URL成为必需。类似地，对于连接的身份验证模型：它是可选的，但如果存在，则需要用户名和密码。

我正在尝试了解如何设置验证程序以强制执行这些规则。我试过从连接表单组中省略任何验证器，但这似乎要求我建立连接。我已经看过在线教程，解释了如何在嵌套表单组上实现自定义验证，但没有描述如何使整个嵌套表单组可选。

使用Angular 2 FormGroup实现此模型有直接的方法吗？

Answer 1

我有类似的需求，这是一种解决方法：

this.form = new FormGroup({
    'name': new FormControl(null, Validators.required),
    'description': new FormControl(null),
    'connection': new FormGroup({
        'url': new FormControl(null),
        'authentification': new FormGroup({
            'username': new FormControl(null, Validators.minLength(5)),
            'password': new FormControl(null),
        }, this.authentificationValidator.bind(this)),
    }, this.connectionValidator.bind(this))
});

2个验证器功能：

authentificationValidator(g: FormGroup): any {
    const username = g.get('username').value;
    const password = g.get('password').value;

    if( (username && !password) || (!username && password) ) {
        return {
            authentification: true
        };
    }
}

connectionValidator(g: FormGroup): any {
    const url = g.get('url').value;

    const authentification = g.get('authentification');
    const username = authentification.get('username').value;
    const password = authentification.get('password').value;

    if( (username || password) && !url ) {
      return {
          connection: true
      };
    }
}

对于输出，如果只填写名称，您仍然会：

{
  "name": null,
  "description": null,
  "connection": {
    "url": null,
    "authentification": {
      "username": null,
      "password": null
    }
  }
}

所以你必须条件创建一个新对象：

{
  "name": null,
  "description": null,
  "connection": null
}

Check this plunker to experiment this solution

在Angular 2中创建可选的嵌套表单组

1 个答案: