角度2表单元素作为组件 – 验证不起作用

概述我将此解决方案应用于我的项目 http://blog.rangle.io/angular-2-ngmodel-and-custom-form-components/ 基本上你用表单元素构建一个组件并将其放入表单中,我遇到的问题是,当我想构建一个检查字段之间依赖关系的验证器时 import {Directive, Attribute} from '@angular/core'; impor 我将此解决方案应用于我的项目 http://blog.rangle.io/angular-2-ngmodel-and-custom-form-components/
基本上你用表单元素构建一个组件并将其放入表单中,我遇到的问题是,当我想构建一个检查字段之间依赖关系的验证器时

import {Directive,Attribute} from '@angular/core';    import {      NG_VALIDATORS,AbstractControl,} from '@angular/forms';    @Directive({      selector: '[valIDateEqual][ngModel]',provIDers: [        {provIDe: NG_VALIDATORS,useExisting: ParentFIEldNotNullValIDator,multi: true}      ]    })    export class ParentFIEldNotNullValIDator {      constructor(@Attribute('valIDateEqual') public valIDateEqual: string) {      }      valIDate(c: AbstractControl): {[key: string]: any} {        if (!c.value) {           return null;        }        let e = c.root.get(this.valIDateEqual);        if (e && e.value) {          console.log('ERROR 1');          return null;        }        console.log('error 2');        return {valIDateError: "message"} }}

在常规模板驱动形式的工作,但在这个实现它不,我得到这种流
screenshot from webbrowser

当父字段存在且非空时,此验证器应仅写入“错误1”

我做错了什么？
我的HTML：

<form #form="ngForm" (ngsubmit)="onsubmit(form.value)">  <div >    <form-input      cannotContainSpace      minlength="4"      required      name="username"      [(ngModel)]="user.username">      >    </form-input>  </div>  <div >    <form-input      valIDateEqual="username"      type="password"      required      name="password"      [(ngModel)]="user.password">      >    </form-input>  </div>  <button        type="send"    [Disabled]="!form.valID"  >    {{'btn_login'|translate}}  </button></form>

解决方法 我找到了一个解决方案,问题在于数据绑定,现在我的验证器看起来像这样：

import {Directive,input} from '@angular/core';import {  NG_VALIDATORS,} from '@angular/forms';@Directive({  selector: '[valIDateEqual][ngModel]',provIDers: [    {provIDe: NG_VALIDATORS,multi: true}  ]})export class ParentFIEldNotNullValIDator {  constructor() {  }  @input('valIDateEqual') parentValue: string;  valIDate(c: AbstractControl): {[key: string]: any} {    if (!c.value) {      return null;    }    if (this.parentValue) {      return null;    }    return {parentFIEldNotNull: "message"}  }}

和HTML看起来像这样

<form #form="ngForm" (ngsubmit)="onsubmit(form.value)">  <div >    <form-input      cannotContainSpace      minlength="4"      required      name="username"      [(ngModel)]="user.username">      >    </form-input>  </div>  <div >    <form-input      [valIDateEqual]="user.username"      type="password"      required      name="password"      [(ngModel)]="user.password">      >    </form-input>  </div>  <button        type="wyslij"    [Disabled]="!form.valID"  >    {{'btn_login'|translate}}  </button></form>

总结

以上是内存溢出为你收集整理的角度2表单元素作为组件 – 验证不起作用全部内容，希望文章能够帮你解决角度2表单元素作为组件 – 验证不起作用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。