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看到了非常奇怪的行为。有时它显示＆＃34;密码是必需的＆＃34;有时不会。
我想停用提交按钮，直到表单有效。我试过

[无效] =＆＃34;！f.valid＆＃34;

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

组件：

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

}

更新

无法绑定到＆＃39; formGroup＆＃39;因为它不是“形式”的已知属性。   （＆＃34;] [formGroup] =＆＃34;形式＆＃34;   （ngSubmit）=＆＃34; dologin（form.value）＆＃34;＆GT;                             ] [formControl] =＆＃34; form.controls [＆＃39;密码＆＃39;]＆＃34;＆GT;            [错误 - ＆gt;]                             用户名           [错误 - ＆gt;]

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

感谢。

Answer 1

您设置HTML模板的方式缺少一些关键位，实际上确保您已将前端连接到后端以获取响应式表单。您所拥有的内容似乎更符合模板驱动的模板驱动形式。事实上，如果删除FormsModule导入，您发布的模板甚至都不会编译。

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

<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] =＆＃34; ngModel＆＃34;在模型驱动的表单中不受支持，因此您将使用formControlName或[formControl]语法。

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

最后，您的提交按钮会更改，请注意您输入了类型=＆＃34;提交＆＃34;两次，来自<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

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']);
}

模型驱动形式：验证在Angular 2

2 个答案: