Angular8 - 仅当字符串不为空时才设置 FormGroup

Question

在我的项目中，我有几个FormControls：

app.component.ts

  readonly titleCtrl = new FormControl()
  readonly descriptionCtrl = new FormControl()
  readonly ageCtrl = new FormControl(null)

我已添加到 FormGroup:

  readonly formGroup = new FormGroup({
    title: this.titleCtrl,
    description: this.descriptionCtrl,
    age: this.ageCtrl,
  })

然后存储在我的 Mongo DB 中：

private fillForm(item: Item): void {
  this.formGroup.setValue(
    {
      title: item.title.overrideValue,
      description: item.description.overrideValue,
      age: item.age.overrideValue,
    },
    { emitEvent: false },
  )
}

所以一切正常，并将我的值存储在数据库中。但它也在数据库中存储空值。我该怎么办，这是不可能的？

如果用户编辑例如title 这个函数将它作为title.overrideValue 存储在数据库中，这没关系。但是如果用户再次编辑标题并删除了值（所以title是一个空字符串），它应该取title.sourceValue。

提前致谢。

Answer 1

为您的 formGroup 使用验证器：

readonly formGroup = new FormGroup({
    title: new FormControl(this.titleCtrl, Validators.required),
    description: this.descriptionCtrl,
    age: this.ageCtrl,
  });

然后，您可以为每个表单字段使用自定义 getter 并自定义验证消息：

  get titleFormControl() { return this.formGroup.get('titleFormControl'); }
  get titleFormControlErrorMessage() {
    if (this.titleFormControl.hasError('required')) {
      return 'Title is required';
    }

    return '';
  }

在你的模板中：

<span *ngIf="titleFormControl.invalid">{{titleFormControlErrorMessage}}</span>

无论如何，任何客户端验证（角度）都必须在您的服务器 api 中重复。很快，在您的服务器中，再次检查该字段是否为空，如果是则抛出异常。

Answer 2

private fillForm(item: Item): void {
  this.formGroup.setValue(
    {
      title: item.title.overrideValue ?  item.title.overrideValue :  item.title.sourceValue,
      description: item.description.overrideValue,
      age: item.age.overrideValue,
    },
    { emitEvent: false },
  )
}

item.title.overrideValue ? item.title.overrideValue : item.title.sourceValue 中的? 称为ternary operator，基本上是单行 if 语句。 如果item.title.overrideValue 等于"" 或undefined，它将使用sourceValue，否则使用overrideValue

您可以尝试的其他事情是防止空输入（通过验证器）。 Angular 文档为此提供了example。