具有初始值的 FormGroup 和验证器不起作用答案

【问题标题】：FormGroup with initial value and validators are not working具有初始值的 FormGroup 和验证器不起作用
【发布时间】：2021-01-11 14:35:58
【问题描述】：

我在我的 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 不工作，我可以设置 return true 或 false 它永远不会让我出错。

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

【问题讨论】：

如果您将验证器添加到 FormControl，则参数是自己的 FormControl（不是 formGroup）。此外，如果一切正常，自定义验证器必须返回 null（非 false），如果无效则返回对象或值。
谢谢，你能不能也检查一下我的html，因为验证器没有效果......
我不知道你的datepicker 组件，但如果自定义formControl 实现得很好，你应该使用formControlName="beginDatum" 或[formControl]="datenForm.get('beginDatum')"。那么你可以忘记(datepickerChanges)和value。Is是javascript中的一个日期选择器，在函数(datepickerChanged)中你需要使用this.datenForm.get('beginDatum').setValue(beginDatum.value)或类似的方法来为formControl赋值

标签： javascript angular

【解决方案1】：

FormBuildergroup() 方法需要一组子控件。所以beginDatum、endDatum和username都是FormControls。
您的模板文件需要访问这些控件。在您的每个表单控件上使用formControlName 输入，如下所示：<datepicker formControlName="beginDatum">... 来实现这一点。
checkMonth() 和你的每一种验证方法都期待 FormGroup 但他们应该期待 FormControl 因为这是他们真正收到的。

顺便说一句，我强烈建议您阅读一些有关 template-driven 和 reactive 表单的文档，因为您似乎将它们混合在一起。

【讨论】：