Требуется использование шаблонных форм, допускается пустая строка - угловая 7/8

Question

У меня проблема с проверкой формы, допускающей пустые строки. required работает, но позволяет пользователю нажимать пробел. Решение, которое я нашел в Интернете, работает с использованием ng-pattern pattern=".*[^ ].*", но по какой-то причине оно не работает с textarea. если пользователь копирует и вставляет шаблон html-страницы, возникает ошибка. странная вещь, когда я изменяю текстовое поле на поле ввода, оно работает нормально. Какое правильное решение исправить это. это позволяет пользователю вставлять определенные вещи, но я не могу точно определить причину ошибки, когда я скопировал всю HTML-страницу и вставил ее в текстовую область для тестирования. кажется, что промежуток между ними вызывает это. 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 +. *

Это позволяет пользователю использовать пробел, НО он не будет действителен (если только его пробелы):

ТОЛЬКО ПРОСТРАНСТВА НЕ ВИДЕНЫВ ЭТОМ СЛУЧАЕ!

Этот ответ только для того, чтобы соответствовать вашему первоначальному запросу, но все же я думаю, что обрезка этого для пользователя может быть лучшим пользовательским опытом.

Чтобы использовать директиву триммера, вы можетеиспользуйте это:

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 2

Вы можете использовать этот шаблон для своих целей "(\ s * [^ \ s] + \ s *) +"

Answer 3

Простое и надежное решение - просто добавить форму в качестве параметра в 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>

TYPESCRIPT

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;
  }
}

Answer 4

вы можете просто создать собственный валидатор и этот подход многократного использования

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 ⚡⚡