Angular2/4无法绑定输入域ngControl - 不能读取的不确定

2017-06-19 30 views 0 likes

我有一个自定义的验证程序来检查输入域空间属性的“错误”，但我不能明白，为什么输入字段被未定义的构造。Angular2/4无法绑定输入域ngControl - 不能读取的不确定

CustomValidationComponent：

import {Component} from '@angular/core'; 
import {FormControl, FormGroup, FormBuilder} from '@angular/forms'; 
import {UsernameValidators} from './usernameValidators'; 

@Component({ 
    selector: 'custom-validation', 
    template: ` 
    <div [formGroup]="usernameGroup"> 
     <input type="text" placeholder="Name" formControlName="username"> 
     <div *ngIf="username.errors.cannotContainSpace"> Without spaces! </div> 
    </div> 
    ` 
}) 

export class CustomValidationFormComponent { 

    usernameGroup: FormGroup; 

    constructor(fb: FormBuilder){ 
    this.usernameGroup = fb.group({ 
     username: ['', UsernameValidators.cannotContainSpace], 
    }); 
    }

UsernameValidator：

import {FormControl} from '@angular/forms'; 

export class UsernameValidators { 
    static cannotContainSpace(control: FormControl){ 
    if (control.value.indexOf(' ') >= 0) 
     return { cannotContainSpace: true }; 

     return null; 
    } 
}

PLUNKER

来源

2017-06-19 J.D.

回答

你username formControl是不是一个类变量直接访问。您可以通过FormGroup这是userNameGroup访问它。

<div *ngIf="usernameGroup.controls['username'].errors?.cannotContainSpace">

或者像曼努埃尔Zametter提到：

<div *ngIf="usernameGroup.controls.username.errors?.cannotContainSpace">

的?.是安全的导航操作这确实对错误进行检查，如果它是undefined或null。

Plunker

来源

2017-06-19 11:54:39

你也可以只访问属性一样，直接usernameGroup.controls.username.errors？.cannotContainSpace –

你right..either方式工作。 –

谢谢@suraj，我贴在与所述溶液编辑 –

Angular2/4无法绑定输入域ngControl - 不能读取的不确定

回答

相关问题