自定义验证 Angular 6 - 至少填充一个文本区域答案

【问题标题】：Custom validation Angular 6 - at least one textarea filled自定义验证 Angular 6 - 至少填充一个文本区域
【发布时间】：2018-09-17 18:13:48
【问题描述】：

当我单击提交时，没有一个文本区域完成，我必须看到一个错误。当至少一个被填满时 - 我想呈现提交动作？我怎样才能以最好的方式做到这一点？

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

【问题讨论】：

开始使用响应式表单。
看看我的回答

标签： angular validation

【解决方案1】：

模板驱动方法：

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

组件： 遍历对象以了解它是否为空。在 Group 表单上监听 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

【讨论】：

@emka26 也许你在找这个:)
你应该直接通知他他的问题，除非他是 OP 或评论过，否则不会收到通知
@trichetriche thanx mate 我不知道
好的@Vikas，太好了，这几乎就是我需要的。现在只有一件事：当isEmpty == true时我需要有一个错误，所以我修改了onSubmit函数并显示这个错误。但问题是，当我在显示错误后将文本添加到 textarea 时，我想立即隐藏此错误（不是在下一次 clixk 提交之后但在输入文本之后）。我该怎么做？ stackblitz.com/edit/…
@emka26 看看更新的 ans 和 stackblitz。

【解决方案2】：

按照您的模式，您可以使用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();
  }
}

【讨论】：

好的@HiWorld，但我不想禁用按钮，只是不执行提交操作并显示错误。
已编辑，尽管您处理表单的方式不是 Angular 方式。我建议阅读模板驱动表单、反应驱动表单

【解决方案3】：

这里不是使用普通的旧 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;
  };
}

验证器将测试表单的值是否具有至少一个真值。如果没有，它将显示错误。

我改用响应式表单是因为对于验证，当您是初学者时更好地理解它的工作原理。随意将其更改为您对模板驱动表单的需求，或保持原样。

【讨论】：

@Vikas，我希望你不要编辑我的答案。您“纠正”了完全有效的英语，并在我的回答中附加了错误的内容。下次，请克制自己。
谢谢，这段代码在模板驱动的表单中会是什么样子？而且我不想禁用提交按钮，但在单击提交后显示错误，如果存在错误则不呈现提交操作。
你可以更改按钮的*ngIf，我只是用它来检查我的验证器是否工作（比写错误更快！）。模板驱动的表单可以查看the documentation，会比我解释的更好！
@tricheriche "已更正" 完全有效的英语我可能同意，但 在我的答案中添加了错误的内容 我的编辑出了什么问题？？反应式表单和模型驱动方法不一样吗？
模型驱动没有任何意义，它可以适用于反应式和模板驱动！