Angular 为现有formgroup添加验证程序

我有一个表单，当前只有一个字段

description

，我正在根据下面给出的模型构建该表单

查看模型.ts

export class ViewModel {
  description = '';
}

export class ViewActionComponent {
  constructor(public fb: FormBuilder) {
    this.groupForm = this.fb.group(new ViewModel());
  }
...
}

查看操作.component.ts

export class ViewModel {
  description = '';
}

export class ViewActionComponent {
  constructor(public fb: FormBuilder) {
    this.groupForm = this.fb.group(new ViewModel());
  }
...
}

这个表单工作得非常好。现在的问题是我需要为描述字段添加验证器（比如只输入文本）。有没有办法在

view model.ts

文件中添加一个用于描述的验证器，这样我就不会修改

view action.component.ts

文件

---

所以基本的想法是，如果我需要使用validator添加另一个字段，我可以在ViewModel本身中执行。

因此，您的问题是希望使用

视图模型.ts

类构建表单

通过传递对象来构建窗体的问题：

this.fb.group（新ViewModel（））

表单生成器仅使用该对象中的状态来创建表单值。这不是一套关于如何构建更复杂的表单和验证的说明。您需要通过与每个控件的表单生成器交互来构建复杂表单

要实现这一点，您可以让视图模型构建表单：

export class ViewModel {
  description = '';

  private form: FormGroup;

  createForm(formBuilder: FormBuilder): FormGroup {
    this.form = formBuilder.group({
      description: formBuilder.control(this.description, {
        validators: [
          Validators.required
        ]
      })
    });
    return this.form;
  }

  update() {
    this.description = this.form.get('description').value;
  }
}

因此，现在您的组件的形式如下所示：

this.groupForm = this.viewModel.createForm(this.fb);

提交时，组件会指示视图模型它可以从表单中更新自身

onSubmit() {
  this.viewModel.update();
}

---

演示：

因此，您的问题是希望使用

视图模型.ts

类构建表单

通过传递对象来构建窗体的问题：

this.fb.group（新ViewModel（））

表单生成器仅使用该对象中的状态来创建表单值。这不是一套关于如何构建更复杂的表单和验证的说明。您需要通过与每个控件的表单生成器交互来构建复杂表单

要实现这一点，您可以让视图模型构建表单：

export class ViewModel {
  description = '';

  private form: FormGroup;

  createForm(formBuilder: FormBuilder): FormGroup {
    this.form = formBuilder.group({
      description: formBuilder.control(this.description, {
        validators: [
          Validators.required
        ]
      })
    });
    return this.form;
  }

  update() {
    this.description = this.form.get('description').value;
  }
}

因此，现在您的组件的形式如下所示：

this.groupForm = this.viewModel.createForm(this.fb);

提交时，组件会指示视图模型它可以从表单中更新自身

onSubmit() {
  this.viewModel.update();
}

---

演示：

谢谢您的回复。但你没领会我的意思。My model和formgroup位于不同的文件中。在您的示例中，它位于同一个文件中。对哦，我想我明白你想要达到的目标了。那么，您想从一些值集神奇地创建一个所需的验证器吗？我认为尝试从

this.fb.group（new ViewModel（））

创建一个复杂的表单需要很多。如果您想将

view action.component.ts

中的修改保持在最低限度，您可以在视图模型上使用一些

createForm

功能-我已经在演示中修改了视图模型。对不起，我没有更新我的演示，我放弃了它。没问题：）我会用您的问题和解决方案编辑我的答案谢谢您的回复。但你没领会我的意思。My model和formgroup位于不同的文件中。在您的示例中，它位于同一个文件中。对哦，我想我明白你想要达到的目标了。那么，您想从一些值集神奇地创建一个所需的验证器吗？我认为尝试从

this.fb.group（new ViewModel（））

创建一个复杂的表单需要很多。如果您想将

view action.component.ts

中的修改保持在最低限度，您可以在视图模型上使用一些

createForm

功能-我已经在演示中修改了视图模型。对不起，我没有更新我的演示，我把它岔开了没有问题：）我将用您的问题和解决方案编辑我的答案