Question

所以我对ngControl＆amp; amp; ngFormModel。在我看来，它是因为如果我以编程方式声明一个ControlGroup，我不应该有一个ngFormModel（相反的html形式）明确地将我的所有控件绑定在一起。

鉴于下面的代码，除非我将输入包装在HTML中的相同表单对象中，并且从其名称开始编排，否则这将无效。

@Component({
    selector: "login-form",
    template: `
        <div>
            <input type="text" ngControl="usernameControl" [ngClass]="{'has-error': !usernameControl.valid}" />
            <input type="password" ngControl="passwordControl" [ngClass]="{'has-error': !passwordControl.valid}"/>
        </div>
    `
export class VenueCard{
    usernameControl: Control;
    passwordControl: Control;
    loginFormGroup: ControlGroup;

    constructor(private _formBuilder: FormBuilder){
        this.usernameControl = new Control("", Validators.minLength(2));
        this.passwordControl = new Control("", Validators.minLength(6));

        this.loginFormGroup = this._formBuilder.group({
            username: this.usernameControl,
            password: this.passwordControl});
    }

    submitForm(){
        if (!this.loginFormGroup.valid){return;}
        // Use usernameControl.value & passwordControl.value now
    }
}

我所期望的是，我可以将单个输入元素绑定到ngControl属性，并且它将跟踪其自身的有效性。 formGroup只是我检查所有控件的快捷方式，但不是必需的。我只是没有正确地设置这个，还是我从根本上错过了一些我的心态？

Answer 1

您可以使用ngFormControl，如下所示plunk：

@Component({
    selector: "login-form",
    directives:[NgFormControl],
    template: `
        <div>
            <input type="text" [ngFormControl]="usernameControl" [ngClass]="{'has-error': !usernameControl.valid}" />
            <input type="password" [ngFormControl]="passwordControl" [ngClass]="{'has-error': !passwordControl.valid}"/>
        </div>
    `
})
export class VenueCard{
    ...
}

没有ngFormModel的Angular 2 ngControl

1 个答案: