Question

我已经以角度反应形式实现了一个自定义验证器，但是它没有显示错误消息。请在下面的链接中找到代码。 https://stackblitz.com/edit/angular-yalkcb?file=src%2Fapp%2Fapp.component.ts

Answer 1

我已为您修复了它。有关工作状态，请参见https://stackblitz.com/edit/angular-ewfmt4?file=src%2Fapp%2Fapp.component.ts。

我更改了validateFname-> validateFname()，因为它不是validatorFn，而是validatorFnFactory

模板中的

regForm.controls['fname'].errors.forbiddenName-> regForm.controls['fname'].errors?.forbiddenName。如果错误为null，则此?.运算符不会评估errors.forbiddenName。它使您的控制台更清洁

const forbidden = false;-> let forbidden = false;，因为根据逻辑，这不是常数

Answer 2

我已为您修复并简化了此操作：

在您的component.html上，添加安全导航“？”这样，只有在存在错误的情况下（即，如果errors不为null时，才对表达式进行求值）

<tr> 
  <td>
    <span *ngIf="regForm.controls['fname'].errors?.forbiddenName">
      invalid name
    </span>
  </td>
 </tr>

和您的component.ts上，

export function validateFname(control: AbstractControl)  {
  let val = control.value;
  if (val.includes('s')) {
    // return {'forbiddenName': {'value': val}};
    return {'forbiddenName': true}; 
  }
  return null;

}

无法以角度反应形式打印自定义验证器错误

2 个答案: