我正在使用这样的模型驱动形式 . 就像普通验证一样,如果缺少用户名和密码,我希望我显示错误消息 .
只要用户名和密码无效,就应禁用“提交”按钮 .
<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看到了很奇怪的行为 . 有时它显示"Password is required",有时不显示 .
-
我想 disable the submit button ,直到表格有效 . 我试过
[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]
});
}
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 ['密码']“> [错误 - >]用户名[错误 - >]
谢谢 .
2 回答
您设置HTML模板的方式缺少一些关键位,实际上确保您已将前端连接到后端以获取响应式表单 . 您所拥有的内容似乎更符合模板驱动的模板驱动形式 . 事实上,如果删除FormsModule导入,您发布的模板甚至都不会编译 .
首先删除您的FormsModule导入,它允许您将两种不同的表单类型混合在一起 . 这将使我们走上一条需要严格的Reactive Forms(又称模型驱动)实现的道路 .
<form #f="ngForm" (ngSubmit)="dologin(f)">
将更改为<form [formGroup]="form" (ngSubmit="dologin(form.value)"
您的每个输入和警告div都将改变
至
更改是因为模型驱动表单中不支持ngModel属性和#[name] =“ngModel”,因此您将使用formControlName或[formControl]语法 .
最后,您的提交按钮会发生变化,请注意您的类型= "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
无表单构建器的实现
零件: