Angular 4：从模型中捕获自定义错误的最佳实践

Question

我有一个 Angular4 应用程序，模型在输入数据时执行所有验证工作（如果输入错误，模型会抛出错误并且不设置变量），所以理想的情况是链接任何输入更改直接到与模型相关的 set 方法，这些将使组件非常精简和可扩展。 我的第一个策略是创建一个指令，我通过 setter 方法，我的指令执行 try/catch 句柄

我的 html 是：

<div class="input-field col s12" appFormSetter [setFunction]="session?.getPlayer()?.setName">
   <i class="material-icons prefix">account_circle</i>
   <input #input placeholder="João da Silva" type="text" class="validate" 
          [ngModel]='session.getPlayer()?.getName()' name="name">
   <label for="first_name" class="active">Nome</label>
</div>

指令是：

import { Directive, HostListener, Input, ElementRef } from '@angular/core';
@Directive({
   selector: '[appFormSetter]'
})
export class FormSetterDirective {

  @Input() setFunction;

  @HostListener('input') onInput() {
    try {
        this.setFunction(this.elRef.nativeElement.value);
    } catch (error) {
        // Would catch the error and show in some <small>
        console.log('Error', error);
    }
  }

  constructor(private elRef: ElementRef) {
    console.log('mychildren', this.inputElement);
  }
}

模型将是：

public setName(name: string): void {
    if(!isValid()) throw 'myError';
    this.name = name;
}

处理此类问题的最佳做法是什么？ 我可以不通过指令直接通过html得到错误吗？

Answer 1

您应该使用ReactiveFormsModule。它具有变更检测和验证处理功能。
我给出了一个答案，其中涉及 cookie 和所需验证的模板 here。
下载示例，试一试现场示例。

如果您将鼠标悬停在链接上，您会看到链接中有“final”。另一个你必须手动添加代码。我建议使用“最终”版本。

此外，如果您转到 Angular.io 并搜索“验证器”，您将能够找到诸如 EmailValidator、PatternValidator 之类的示例。这是主要的Validators 类。

如果你想了解更多，Angular 大学有一个很好的课程。
他们有一个 YouTube 频道，他们的代码在 Github 上。
您需要确定要从以下视频中查看哪些分支：
“Rxjs and Reactive Patterns Angular Architecture Course”。