javascript - 具有初始值的 FormGroup 和验证器不起作用

Question

我在我的 ts 文件中创建了一个表单组:

datenForm: FormGroup;

ngOnInit(): void {
    this.datenForm = this.formBuilder.group(
      {
        beginDatum: ['29/03/2019', [Validators.required, this.checkMonth]],
        endDatum: ['29/03/2020', [Validators.required, this.checkSomething]],
        username: ['pedro', [Validators.required, this.checkName]],
      },
    );
  }

我在表单组中创建了 3 个值，并且我想为每个值使用一个验证器，因此我创建了 3 个验证器 checkMonth、checkSomething、checkName。

我在我的 ts 中创建了验证器:

checkMonth(group: FormGroup) {
    console.log(group.get("beginndatum").value);
  }

checkSomething(group: FormGroup) {
    return false;
  }

在这里，我只想尝试验证器(当我知道它是如何工作时，我会编写正确的验证器)。

在我的 html 文件中，我这样使用它:

<datepicker
              (datepickerChanged)="changeInfo(beginDatum)"
              #beginDatumId="beginDatum"
              invalid="{{datenForm.get('beginDatum').invalid && datenForm.get('beginDatum').dirty}}"
              error=""
              name="beginDatum"
              value="{{datenForm.get('beginDatum').value}}">
</datepicker>

我的问题在这里，如果我的表单组中有一个初始值，那么我会出现错误，因为 group.get("beginndatum").value 在 checkMonth 中未定义，所以我这样做了:

checkMonth(group: FormGroup) {
    if (group.get("beginndatum") == null) {
      return false;
    }
    return true;
  }

但是我的 checkValidator 不起作用，我可以设置返回 true 或 false 它永远不会给我带来错误。

如何使用具有初始值的验证器并将其与我的组件绑定(bind)？

Answer 1

1. FormBuilder group()方法需要子控件的集合。所以beginDatum , endDatum和username都是FormControls .
2. 您的模板文件需要访问这些控件。使用formControlName在每个表单控件上输入如下所示:<datepicker formControlName="beginDatum">...来实现这一目标。
3. checkMonth()并且您的每一种验证方法都期望 FormGroup但他们应该期待 FormControl因为这才是他们真正收到的。

顺便说一句，我强烈建议您阅读一些有关 template-driven 的文档和 reactive形式，因为你似乎将它们两者混合了一点。