html - 模型驱动形式 : validation not working as expected in 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]
    });

}

更新

Can't bind to 'formGroup' since it isn't a known property of 'form'. (" ][formGroup]="form" (ngSubmit)="dologin(form.value)"> ][formControl]="form.controls['password']"> [ERROR ->] Username [ERROR ->]

"): LoginComponent@4:8 No provider for NgControl (" Password [ERROR ->] ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. ("
][formGroup]="form" (ngSubmit)="dologin(form.value)"> ][formControl]="form.controls['password']"> [ERROR ->] Username [ERROR ->]

谢谢。

Answer 1

您设置 HTML 模板的方式缺少一些关键位，这些位实际上确保您已将前端连接到后端以获得响应式(Reactive)表单。您所拥有的似乎更符合混合了模型驱动的模板驱动形式。事实上，如果您删除 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>

最后，您的提交按钮发生变化，请注意您有两次 type="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