Angular 如何设置必需的字段验证器，使其不允许只包含空格的字符串

假设我有一个角反应形式

this.setupForm = fb.group({
  "name": ['John Smith', Validators.required]
});

我有一个表单字段

        <mat-form-field appearance="fill">
            <mat-label>Name</mat-label>
            <input type="text" matInput formControlName="name" />
            <mat-error *ngIf="name.invalid">A name is required</mat-error>

        </mat-form-field>

  "name": ['', [Validators.compose([Validators.required, NoWhitespaceValidator])]]

名称
需要一个名称

在这种情况下，表单字段名没有值时无效。但是，它将允许只包含空格的字符串

---

如何在formfield上设置验证器，使其成为必填字段且值不能仅为空格？

我建议您创建一个自定义验证器。但您也可以通过以下小调整进行合并：

<mat-error *ngIf="name.invalid && !!name.value && !!name.value.trim()">A name is required</mat-error>.

需要一个名称。

---

只需检查表单控件值及其修剪值。

我建议您创建一个自定义验证器。但您也可以通过以下小调整进行合并：

<mat-error *ngIf="name.invalid && !!name.value && !!name.value.trim()">A name is required</mat-error>.

需要一个名称。

---

只需检查表单控件值及其修剪值。

自定义验证器如何

export function noWhiteSpaceValidator(): (control: AbstractControl) => ValidationErrors {
  return control => !(!!control.value && !!control.value.trim()) ? { whiteSpace: true } : null;
}

以及：

---

那么定制验证器呢

export function noWhiteSpaceValidator(): (control: AbstractControl) => ValidationErrors {
  return control => !(!!control.value && !!control.value.trim()) ? { whiteSpace: true } : null;
}

以及：

---

您可以轻松地使用模式验证

firstName: ['', [Validators.required,Validators.pattern(/^[A-z]*$/)]]

---

您可以轻松地使用模式验证

firstName: ['', [Validators.required,Validators.pattern(/^[A-z]*$/)]]

---

这个自定义验证器似乎可以工作

export function NoWhitespaceValidator(control: AbstractControl) {
  var val = control.value;

  if(val.trim() == ''){
    return { nowhitespace: true}
  }
  else
  {
    return null;
  }
}

外接程序表单字段

        <mat-form-field appearance="fill">
            <mat-label>Name</mat-label>
            <input type="text" matInput formControlName="name" />
            <mat-error *ngIf="name.invalid">A name is required</mat-error>

        </mat-form-field>

  "name": ['', [Validators.compose([Validators.required, NoWhitespaceValidator])]]

---

这个自定义验证器似乎可以工作

export function NoWhitespaceValidator(control: AbstractControl) {
  var val = control.value;

  if(val.trim() == ''){
    return { nowhitespace: true}
  }
  else
  {
    return null;
  }
}

外接程序表单字段

        <mat-form-field appearance="fill">
            <mat-label>Name</mat-label>
            <input type="text" matInput formControlName="name" />
            <mat-error *ngIf="name.invalid">A name is required</mat-error>

        </mat-form-field>

  "name": ['', [Validators.compose([Validators.required, NoWhitespaceValidator])]]

---

您还可以向输入中添加一个模式：例如pattern=“\s*（\s\s*）{10，}”，至少有10个非空格字符您还可以向输入中添加一个模式：例如pattern=“\s*（\s\s*）{10，}”，至少有10个非空格字符，正则表达式使用空格使任何字符串无效。所以它会选择“”，但也会选择“John Smith”。正则表达式会使任何带空格的字符串无效。所以它会选择“”，但也会选择“John Smith”。这对我来说不起作用，但我遵循同样的概念，创建了自己的自定义验证器（请参见我的答案）。事实上，它应该是：

！（！！control.value&&！！control.value.trim（））

这对我不起作用，但我遵循同样的概念，创建了自己的自定义验证器（请参见我的答案）。事实上，它应该是：

！（！！control.value&&！！control.value.trim（））