所需的模板驱动表单允许空字符串 - Angular 7/8

Question

我的表单验证允许空字符串时遇到问题。 required 有效，但允许用户单击空间。我在网上找到的解决方案是使用 ng-pattern pattern=".*[^ ].*" 但由于某种原因它不适用于textarea。如果用户复制并粘贴 html 页面 ng 模式会引发错误。奇怪的是，当我将 textarea 更改为输入字段时，它工作正常。解决此问题的正确解决方案是什么。它允许用户粘贴某些内容，但是当我复制整个 html 页面并将其粘贴到 textarea 以进行测试时，我无法确定导致错误的原因。似乎中间的间距导致了它。 StackBlitz：https://stackblitz.com/edit/angular-nhvgf1?file=src/app/hero-form/hero-form.component.html

这是我粘贴在不应引发错误的文本区域中的内容：<button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button> <button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button> <i>with</i> reset

 <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
  <div class="form-group">
    <label for="name">Name</label>
    <textarea type="text" class="form-control" id="name"
           required
            pattern=".*[^ ].*"
           [(ngModel)]="model.name" name="name"
           #name="ngModel"></textarea>
    <div [hidden]="name.valid || name.pristine"
         class="alert alert-danger">
      Name is required
    </div>
  </div>


  <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>
  <button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>
  <i>with</i> reset

  &nbsp;&nbsp;
  <button type="button" class="btn btn-default" (click)="newHero()">New Hero</button>
  <i>without</i> reset

</form>

Answer 1

您可以将此模式用于您的目的 "(\s*[^\s]+\s*)+"

Answer 2

您可以创建一个自定义验证器和这种可重用的方法

export class StrictRequiredDirective  implements Validator {
  validator: ValidatorFn;

  constructor() {
    this.validate = this.isStrictRequired();
  }
  validate(c: FormControl) {
    return this.validate(c);
  }

  isStrictRequired() :ValidatorFn{
    return (c: AbstractControl) => {
      console.log(c.value)
      if (c.value && String(c.value).trim()) {
        return null
      } else {
        return {strictRequired : true}
      }
    }
  }

}

stackblitz demo ⚡⚡

Answer 3

尝试使用这种模式\S+.*

它允许用户使用空间但它是无效的（如果它只有空格）：

在这种情况下，只有空格无效！

这个答案只是为了匹配您的初始请求，但我仍然认为为用户修剪它可以是更好的用户体验。

要使用修剪器指令，您可以使用：

import { ElementRef, HostListener } from '@angular/core';
import { Output, EventEmitter, Renderer2 } from '@angular/core';
import { Directive, Input } from '@angular/core';

@Directive({
  selector: '[forceTrim]'
})
export class TrimDirective {

  @Output() ngModelChange = new EventEmitter();
  constructor(
    private _renderer: Renderer2,
    private _elementRef: ElementRef) {
  }

  @HostListener("input", ["$event.target.value"])
  handleInput(inputValue: any): void {

      const valueToProcess = inputValue.trim();
      this._renderer.setProperty(this._elementRef.nativeElement, "value", valueToProcess);
      this.ngModelChange.emit(valueToProcess);

  }
}

在模板使用中：

    <input
      type="text"
      forceTrim
    />

Answer 4

一个简单可靠的解决方案，就是将表单作为参数添加到 onSubmit，然后在 onSubmit 函数的开头进行额外检查。

HTML

<form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
  <div class="form-group">
    <label for="name">Name</label>
    <textarea type="text" class="form-control" id="name"
           required
            pattern=".*[^ ].*"
           [(ngModel)]="model.name" name="name"
           #name="ngModel"></textarea>
    <div [hidden]="name.valid || name.pristine"
         class="alert alert-danger">
      Name is required
    </div>
  </div>


  <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>
  <button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>
  <i>with</i> reset

  &nbsp;&nbsp;
  <button type="button" class="btn btn-default" (click)="newHero()">New Hero</button>
  <i>without</i> reset

</form>

类型脚本

import { NgForm } from '@angular/forms';

... 

onSubmit(theForm: NgForm) {
  if(theForm.controls.name.value.trim() == '') {handleErrors(theForm, 1); return;}
  ... the rest of your onSubmit Code.
}

handleErrors(theForm: NgForm, errorCode: number) {
  switch (errorCode) {
    case 1:
      console.log("Empty textarea.");
      theForm.controls.name.setError({Empty_Textarea: true});
    return;
    default:
      console.log("Unhandled error"); 
    return;
  }
}