Question

我正在使用angular 7并创建一个模态作为要在我SPA的相关部分上使用的组件。当我单击打开模态的按钮时，出现错误；我正在使用angular 7并创建一个模态作为要在我SPA的相关部分使用的组件。当我单击打开模态的按钮时，我收到一个错误；

错误TypeError：“ _ co.formGroup未定义”

这是我的代码

html

    <form [formGroup]="formGroup" (ngSubmit)="onSubmit(formGroup.value)">
  <h2 class="dialog-form-title">SIGN UP</h2>

  <mat-form-field>
    <input matInput placeholder="Email" formControlName="email">
    <mat-error *ngIf="!formGroup.controls['email'].valid && formGroup.controls['email'].touched">
      {{ getErrorEmail() }}
    </mat-error>
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="Full Name" formControlName="name">
    <mat-error *ngIf="!formGroup.controls['name'].valid && formGroup.controls['name'].touched">

    </mat-error>
  </mat-form-field>

  <mat-form-field>
    <input matInput formControlName="role" placeholder="Role">
    <mat-error *ngIf="!formGroup.controls['role'].valid && formGroup.controls['role'].touched">

    </mat-error>
  </mat-form-field>

  <mat-form-field>
    <input matInput formControlName="orgId" placeholder="Organization Id">
    <mat-error *ngIf="!formGroup.controls['orgId'].valid && formGroup.controls['orgId'].touched">

    </mat-error>
  </mat-form-field>

  <mat-form-field>
    <input matInput formControlName="orgName" placeholder="Organization Name">
    <mat-error *ngIf="!formGroup.controls['orgName'].valid && formGroup.controls['orgName'].touched">

    </mat-error>
  </mat-form-field>

  <mat-form-field>
    <input matInput type="password" formControlName="password" placeholder="Password">
    <mat-error *ngIf="!formGroup.controls['password'].valid && formGroup.controls['password'].touched">

    </mat-error>
  </mat-form-field>

  <mat-form-field>
    <input matInput type="password" formControlName="confirmPassword" placeholder="Confirm Password" ngModel required>
    <mat-error *ngIf="!formGroup.controls['confirmPassword'].valid && formGroup.controls['confirmPassword'].touched">

    </mat-error>
  </mat-form-field>

  <input type="hidden" name="enable" id="enable" value="true">

  <div class="dialog-form-footer">

    <div class="clearfix"><button mat-flat-button class="green-button" type="submit"
        [disabled]="formGroup.invalid">Submit</button></div>

  </div>
  <div class="top"><a id="closeT" (click)="close()">
      <mat-icon>close</mat-icon>
    </a></div>
</form>

这是我的ts代码

TS

  submitted = false;
  formGroup: FormGroup;
  titleAlert: string = "This field is required";

  constructor(
    private formBuilder: FormBuilder,
    private element: ElementRef,
    private dialog: MatDialog,
    private service: AuthService,
    private snackBar: MatSnackBar,
    private dialogRef: MatDialogRef<SignupComponent>
  ) {}

  ngOnInit() {
    this.createForm();
  }

  createForm() {
    let emailregex: RegExp = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    this.formGroup = this.formBuilder.group({
      email: ["", [Validators.required, Validators.pattern(emailregex)]],
      name: ["", Validators.required],
      role: ["", Validators.required],
      orgId: ["", Validators.required],
      orgName: ["", Validators.required],
      password: ["", [Validators.required, Validators.minLength(5)]],
      confirmPassword: ["", [Validators.required, this.passwordValidator]]
    });
  }

  get name() {
    return this.formGroup.get("name") as FormControl;
  }

  passwordValidator(form) {
    const condition =
      this.formGroup.get("password").value !==
      this.formGroup.get("confirmPassword").value;

    return condition ? { passwordsDoNotMatch: true } : null;
  }


  onSubmit(post) {
    console.log(post.value);
    // console.log(form.value);
    const test = post.controls.orgName.value;
    console.log("test sigup:" + test);


    this.service.signupform(post.value).subscribe(
      res => {
        this.dialogRef.close();
        this.snackBar.open(`Success!`, "OK", snackBarConfig);
      },
      err => {
        this.dialogRef.close();
        this.snackBar.open(`Cannot Proses!` + err, "OK", snackBarConfig);
        console.log("check error:" + err);
      }
    );
  }
  close() {
    this.dialogRef.close();
  }

希望大家都能提供帮助

预先感谢

编辑

我在stackblitz中加入了分叉，但是遇到了错误

模块'AppModule'声明的意外值'undefined'

Answer 1

您的代码的问题在于，passwordValidator访问多个FormControl，password和confirmPassword，因此您应该将该验证器绑定到整个FormGroup，而不是绑定到{{1} } FormControl本身。

因此，在component.ts上的createForm方法上，这是您应该使用的：

confirmPassword

然后，在您的验证器方法上，

createForm() {
  let emailregex: RegExp = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  this.formGroup = this.formBuilder.group({
    email: ["", [Validators.required, Validators.pattern(emailregex)]],
    name: ["", Validators.required],
    role: ["", Validators.required],
    orgId: ["", Validators.required],
    orgName: ["", Validators.required],
    password: ["", [Validators.required, Validators.minLength(5)]],
    confirmPassword: ["", [Validators.required]]
  }, {
    validator: this.passwordValidator
  });
}

我为您复制了一个demo，并在component.html上添加了一个标志，如果密码不匹配，该标志实际上会显示错误消息。

Angular 7 formGroup未定义

1 个答案: