angular - 从组件内部检查 Angular4 表单是否有效

Question

以下answer处理 Angular2，但由于 Angular4 中的 Angular 对表单进行了大量更改，因此该解决方案不起作用。任何人都知道如何执行此操作(无需处理 FormGroups 等)。基本上，我怎样才能得到 Angular4 的答案？

Answer 1

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

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

其次，您可以通过两种方式使用 Angular 形式，模板驱动和模型驱动( react 形式)。由于您没有提供任何您正在处理的示例代码，这里有一个 react 形式的示例

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


  }