模型驱动形式：验证在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看到了非常奇怪的行为。 有时它显示“需要密码”，有时不显示。
• 我想禁用提交按钮 ，直到表单有效.i尝试

[禁用] = “！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]
    });

}

UPDATE

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

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

谢谢。

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>

最后，你的提交按钮改变了，注意你有两次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>

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

这是一个可以使用的工作plunker： https ：//plnkr.co/edit/Mu9vEYGB35SwUr9TEsPI？p = preview

Answer 2

无表单构建器的实现

<form #loginForm="ngForm" (ngSubmit)="login()">
    <md-input required type="email" 
        pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" 
        placeholder="Email Address" #email="ngModel" name="email" 
        [(ngModel)]="loginModel.email"></md-input>
    <div *ngIf="email.dirty && !email.valid && email.touched && email.errors" class="error-message">
      <div *ngIf="email.errors.required">Email is required</div>
      <div *ngIf="!email.errors.required && email.errors.pattern">This is not a valid email</div>
    </div>
    <md-input required type="password" placeholder="Password" #password="ngModel" name="password" [(ngModel)]="loginModel.password"></md-input>
    <div *ngIf="password.dirty && !password.valid && password.touched && password.errors" class="error-message">
      <div *ngIf="password.errors.required">Password is required</div>
    </div>
    <button ma-raised-button [disabled]="!loginForm.valid">
      Login
    </button>
</form>

零件：

ngOnInit() {
    this.loginModel = {email: '', password: ''};
}

login() {
    console.log(this.loginModel['email']);
    console.log(this.loginModel['password']);
}