模型驱动形式：验证未按预期在Angular 2中运行

Question

我正在使用这样的模型驱动形式。就像常规验证一样，如果用户名和密码丢失，我希望显示一条错误消息。

只要用户名和密码无效，就应该禁用“提交”按钮。

<div class="login">
<form #f="ngForm" (ngSubmit)="dologin(f)">
    <div class="form-group">
        <label for="username">Username</label>
        <input id="username" type="text" class="form-control" name ="username" ngModel #username="ngModel">

        <div [hidden]="username.valid" class="alert alert-danger"> Username is required.</div>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input id="password" type="password" class="form-control" name ="password" ngModel #password="ngModel">
        <div [hidden]="password.valid" class="alert alert-danger"> Password is required.</div>
    </div>

    <button type="submit" [disabled]="username.length<0 || password.length<0" class="btn btn-primary" type="submit">Login</button>
</form>
</div>

• 我从验证div看到了非常奇怪的行为。有时显示“需要密码”，有时则不显示。
• 我想禁用提交按钮，直到表单有效。

[disabled] =“！f.valid”

但是当我打印出来时，即使我没有在用户名和密码中输入任何数据，f仍然有效。

零件：

constructor(private router: Router,private authenticationService : AuthenticationService,private httpService:HttpService,private formBuilder:FormBuilder) {
    this.form=formBuilder.group({
        username:['',Validators.required],
        password:['',Validators.required]
    });

}

更新

无法绑定到“ formGroup”，因为它不是“ form”的已知属性。（“] [formGroup] =” form“（ngSubmit）=” dologin（form.value）“>] [formControl] =” form.controls ['password']“> [ERROR->]用户名[ERROR->]

“）：LoginComponent @ 4：8 NgControl没有提供者（”密码[错误->]；任务：Promise.then；值：错误：模板解析错误：（…）错误：模板解析错误：无法绑定到' formGroup”，因为它不是'form'的已知属性。（“
” [formGroup] =“ form”（ngSubmit）=“ dologin（form.value）”>] [formControl] =“ form.controls ['password ']“> [错误->]用户名[错误->]

谢谢。

Answer 1

设置HTML模板的方式缺少一些关键位，这些关键位实际上确保您已将前端连接到后端以形成响应式表单。您所看到的似乎与模板驱动的表单与模型驱动的混合更加一致。实际上，如果删除FormsModule导入，则您发布的模板甚至都不会编译。

首先，删除FormsModule导入，使您可以将两种不同的表单类型混合在一起。这将使我们走上一条需要严格的Reactive Forms（又名模型驱动）实现的道路。

<form #f="ngForm" (ngSubmit)="dologin(f)"> 将更改为 <form [formGroup]="form" (ngSubmit="dologin(form.value)"

您的每个输入和警告div都会从

<input id="username" type="text" class="form-control" name="username" ngModel #username="ngModel">

<div [hidden]="username.valid" class="alert alert-danger"> Username is required.</div>

至

<input id="username" type="text" class="form-control" name="username" formControlName="username">

所做的更改是因为在模型驱动的表单中不支持ngModel属性和＃[name] =“ ngModel”，因此您将使用formControlName或[formControl]语法。

        <div [hidden]="form.controls['username'].valid || form.controls['username'].pristine"
        class="alert alert-danger"> Username is required.</div>

最后，您的“提交”按钮将更改，请注意，您两次输入“ =“ submit” <button type="submit" [disabled]="username.length<0 || password.length<0" class="btn btn-primary" type="submit">Login</button>

至

<button type="submit" [disabled]="!form.valid" class="btn btn-primary">Login</button>

由于我们已经成功连接了表单的其余部分，因此对表单组的验证现在是正确的

这是一个可以使用的工作小工具：https ://plnkr.co/edit/Mu9vEYGB35SwUr9TEsPI?p=preview