表单控件验证器

Question

我知道这段代码对我有用：

this.BridgeForm = this.formBuilder.group({
    gateway: ["", [Validators.required, Validators.pattern(this.ipRegex)]],
});

但是，我想更明确地使用属性：

this.BridgeForm = this.formBuilder.group({
    gateway: {
        value: "", disabled: false,
        Validators: [
            Validators.required,
            Validators.pattern(this.ipRegex),
        ]
    },
});

我总是在控制台中遇到错误，如下所示：

ERROR 错误：MaskedTextBox 组件仅支持字符串值。

问题在于验证器属性。我无法从documentation 中弄清楚如何使用它。

Answer 1

您缺少属性值的 FormControl。顶部对象（表单）将创建 FormGroup 的一个实例，每个属性都需要一个 FormControl，您可以在其中定义必要的验证器、禁用等

以下是更新后的语法以适用于您的示例：

this.bridgeForm = this.formBuilder.group({
  gateway: new FormControl({ value: "", disabled: false }, [
    Validators.required,
    Validators.pattern(this.ipRegex)
  ])
});

演示： https://stackblitz.com/edit/angular-ivy-swbfa3?file=src/app/app.component.ts