角2需要验证

我正在努力与角度形式的默认所需的验证。我有一个带有单个输入字段和一个提交按钮的表单。现在当输入字段为空时，该按钮也被禁用（由于验证器）。但是当我进入现场时，我无法直接按下按钮，我首先失去了对输入字段的关注。我怎样才能改变这种行为？角2需要验证

在先进的感谢

编辑：

我有两个文件：

example.form.ts
example.form.template.html

编号：

在当.ts文件我建立一个与formbuilder一种形式：

exampleForm: Formgroup 
constructor(protected pb: Formbuilder){ 
    this.exampleForm = fb.group({ 
    name: ['', Validators.required] 
    }); 
} 

get isFormValid: boolean { 
    return this.exampleForm.valid; 
}

模板：

<form [formGroup]="exampleForm"> 
    <input type="text" formControlName="name"> 
    <button type="submit" [disabled]="!isFormValid" id="save-button">Submit</button> 
</form>

来源

2017-02-06 bendajo

发布的相关代码.. –

什么是“我不能直接按到按钮”意味着什么？你为什么不能？ –

@GünterZöchbauer如果焦点仍然在输入字段上，则该按钮被禁用，因此我无法按下按钮来放大。我首先必须单击该字段才能验证是否输入了某些内容，而不是我可以按现在启用的按钮。 – bendajo

只要输入集中，形式验证将失败原因只要表格知道该字段没有填写。

解决方法是不使用你赢得验证方法。如果你关心的唯一事情是申请将不为空，你可以这样做输入：

<form [formGroup]="exampleForm"> 
    <input type="text" formControlName="name" [(ngModel)]="someName"> 
    <button type="submit" [disabled]="someName==''" id="save-button">Submit</button> 
</form>

现在按钮将只有提起禁用是空的。对于更复杂的逻辑（例如一些正则表达式），您应该构建自定义验证方法。例如：

isValidEmail(): ValidatorFn { 
    return (control: FormControl): string[] => { 
     if (!control || !control.value || control.value == "") 
     return null; 
     if (this.regexService.email.test(control.value)) 
     return null; 

     return ["Invalid email"] 
    }; 
    }

和init validate方法在formBuilder

initFormGroup() { 
    this.authenticateForm = this.formBuilder.group(
     { 
     email: ['', 
      this.isValidEmail() 
     ],   
     } 
    ); 
    }

来源

2017-02-06 09:30:37

回答

相关问题