首页 文章

模型驱动形式:验证在Angular 2中没有按预期工作

提问于
浏览
2

我正在使用这样的模型驱动形式 . 就像普通验证一样,如果缺少用户名和密码,我希望我显示错误消息 .

只要用户名和密码无效,就应禁用“提交”按钮 .

<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 回答

  • 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>

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

    这是一个你可以玩的工作的plunker:https://plnkr.co/edit/Mu9vEYGB35SwUr9TEsPI?p=preview

  • 4

    无表单构建器的实现

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

相关问题