从组件内检查 Angular4 表单是否有效答案

【问题标题】：Checking whether an Angular4 form is valid or not from within the component从组件内检查 Angular4 表单是否有效
【发布时间】：2017-06-27 12:02:08
【问题描述】：

以下answer 处理 Angular2，但由于 Angular4 中的 Angular 已通过表单进行了许多更改，因此此解决方案不起作用。任何人都知道如何做到这一点（无需处理 FormGroups 等）。基本上，我怎样才能让这个答案与 Angular4 一起工作？

【问题讨论】：

我也知道 ngNavtiveValidate 存在，但我想验证表单，因为该组件位于滑块 (swiperjs) 中。此外，使用 ngNativeValidate 会导致一些奇怪的导航问题。因此，如果我能得到错误并向用户显示消息，那会容易得多。我可以创建一些方法来处理这个问题并使用点击事件，但我是一个懒惰的开发人员：D

标签： angular

【解决方案1】：

首先，您提供的链接使用 angular 的 beta 版本。它从@angular/common 导入FormBuilder, Validator and etc。您必须像这样从@angular/forms 导入 app.module 中的 FormsModule

import { FormsModule } from '@angular/forms';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
   //... more code

其次，有两种方式可以使用角度表单，模板驱动和模型驱动（反应式表单）。由于您没有提供任何您正在处理的示例代码，这里有一个反应形式的示例

form: FormGroup;

onSubmit(){
    //checks if form is valid
       if( this.form.valid){
          //more code here
        }
}

您确实需要在代码中使用 FormGroup，但您可以使用 FormBuilder 以不使用 FormControls。

 form: FormGroup;

  constructor( private fb: FormBuilder) {
    this.form = fb.group({
        email: ['', [Validators.required, Validators.minLength(5), Validators.email]],
        password: ['', [Validators.required,  Validators.minLength(6)]],
      }
    );


  }

【讨论】：