在我的表单中，不在字符串上创建验证器，并且无法读取属性＆＃39;有效＆＃39;未定义

Question

在我的Header Component

中

<form formGroup="loginForm" (ngSubmit)="loginSubmit(loginForm.value)">
   <div class="form-group">
      <label for="email">Email</label>
      <input type="text" class="form-control" name="email" formControlName="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
   </div>
   <div class="form-group">
      <label for="password">Password</label>
      <input type="password" class="form-control" name="password" formControlName="password">
   </div>
   <p class="text-center">
      <button class="btn btn-primary"><i class="fa fa-sign-in"></i> Log in</button>
   </p>
</form>

我在header.component.ts档案

中描述了我的表单

export class HeaderComponent implements OnInit {

  loginForm: FormGroup;
  submitted: boolean = false;
  errorMessage: any;
  public model: Login;
  constructor(private _userService: UserService,
              private _fb: FormBuilder,
              private _avRoute: ActivatedRoute,
              private _route: Router) {
              this.model = new Login();
              this.loginForm = this._fb.group({
                  email: ['', [Validators.required]],
                  password: ['',[Validators.required]]
                })   
               }

  ngOnInit() {

  }

  loginSubmit(){
    if(!this.loginForm.valid){
      this.submitted = true;
      return;
    }
    this._userService.userLogin( this.loginForm.value )
      .subscribe(data => {

          this._route.navigate(["home"]);
      },error => this.errorMessage = error);
  }  

}

从最近4个小时开始，我解决了问题，但没有找到更好的解决方案，我也检查了这个答案，但没有解决Click here

或者在我的.ts页面中，当我按下提交事件loginSubmit()时，检查这是否有效，但是错误如cannot read property valid is undefined

Answer 1

请确保您已在app.module.ts中导入[ ]并尝试在html [formGroup]="loginForm"中添加formGroup="loginForm"，而不是<form [formGroup]="loginForm" (ngSubmit)="loginSubmit(loginForm.value)"> <div class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" name="email" formControlName="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control" name="password" formControlName="password"> </div> <p class="text-center"> <button class="btn btn-primary"><i class="fa fa-sign-in"></i> Log in</button> </p> </form> ：

export class HeaderComponent implements OnInit {

  loginForm: FormGroup;
  submitted: boolean = false;
  errorMessage: any;
  public model: Login;
  constructor(private _userService: UserService,
              private _fb: FormBuilder,
              private _avRoute: ActivatedRoute,
              private _route: Router) {
              this.model = new Login();
              this.loginForm = this._fb.group({       

                  email: ['', [Validators.required]],
                  password: ['',[Validators.required]]
                })   
               }

  ngOnInit() {

  }

  loginSubmit(){
    if(!this.loginForm.valid){
      this.submitted = true;
      return;
    }
    this._userService.userLogin( this.loginForm.value )
      .subscribe(data => {

          this._route.navigate(["home"]);
      },error => this.errorMessage = error);
  }  

}

组件：

ReactiveFormsModule

带import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; import { HelloComponent } from './hello.component'; @NgModule({ imports: [ BrowserModule, ReactiveFormsModule, RouterModule ], declarations: [ AppComponent, HelloComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } 的模块：

 fileUploadField = new FileUploadField();
        fileUploadField.setAllowBlank(false);
        fileUploadField.setName("uploadedFile");
        fileUploadField.setFieldLabel("File");
        fileUploadField.getElement().getStyle().setProperty("width", "20px");

在这里工作：

https://stackblitz.com/edit/angular-xq4co6?embed=1&file=app/app.component.html

Answer 2

在模板更改中

formGroup="loginForm"

到

[formGroup]="loginForm"