Пользовательская проверка Angular 6 - заполнена хотя бы одна текстовая область

Question

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

https://stackblitz.com/edit/angular-nfbram?file=src/app/app.component.htmlhttps://stackblitz.com/edit/angular-vz8g7d

Answer 1

Вместо использования простого старого Javascript здесь используется Angular: пользовательская функция проверки на уровне группы форм.

StackBlitz

function atLeastOneTextarea(): ValidatorFn {
  return (group: FormGroup): ValidationErrors => {
    const hasAtLeastOneValue = Object.keys(group.value).some(key => !!group.value[key]);

    return !hasAtLeastOneValue && { 'atLeastOne': true } || null;
  };
}

Валидатор проверит, имеет ли значение формы хотя бы одно истинное значение.Если нет, он покажет ошибку.

Я перешел на реактивные формы, потому что для валидации лучше понять, как это работает, когда вы начинающий.Не стесняйтесь изменять его в соответствии с вашими потребностями в формах на основе шаблонов или сохранять как есть.

Answer 2

Подход, основанный на шаблонах:

 <form #form="ngForm" (ngSubmit)="onSubmit(form.value)">
    <div class="form-group">
      <div class="row">
        <div class="col-md-4" *ngFor="let t of textarea; let in=index">
          <textarea  class="form-control"
                    rows="5" [(ngModel)]="textarea[in].value" 
                    [name]="'something' + in" 
                    placeholder="Type..."></textarea>
        </div>
        <button (click)="add()">Add input</button>
<button  type="submit" >Submit</button>
     </div>
  </div>
</form>

Компонент: Перебирайте объект, чтобы узнать, пуст он или нет. Прослушайте событие valueChanges в форме группы и выполните действия на его основе.

export class AppComponent {

  @ViewChild('form') myForm: NgForm;
  textarea: { value: string }[];
  isError: boolean = false;

  constructor() {
    this.textarea = [{ value: '' }, { value: '' }, { value: '' }];

  }

  add() {
    this.textarea.push({ value: '' });
  }

  isEmpty(obj): boolean {
    for (let key of Object.keys(obj)) {
      if (obj.hasOwnProperty(key) && obj[key].length) {
        return false;
      }
    }
    return true;

  }
  ngAfterViewInit() {
    this.myForm.valueChanges.subscribe(value => {
      this.isError = false;
    })
  }

  onSubmit(form) {
    if (this.isEmpty(form)) {
      this.isError = true;
    } else {
      this.isError = false;
    }
  }
}

Forked StackBlitz

Answer 3

Следуя вашему шаблону, вы можете использовать Array.every:

allEmpty() {
  return this.textarea.every(t => t.value === '')
}

<button [disabled]="allEmpty()">Submit</button>

РЕДАКТИРОВАТЬ:

<button (click)="onSubmit($event)">Submit</button>

<span *ngIf="allEmpty() && clicked">
  error
</span>

clicked = false;
allEmpty() {
  return this.textarea.every(t => t.value === '')
}

onSubmit(e) {
  this.clicked = true;
  if (this.allEmpty()) {
    e.preventDefault();
  }
}