0

コードを実装しているときに、コンソールに次のエラーが表示されます

エラー: 名前のコントロールが見つかりません: FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective の setUpControl (forms.js:1640) で _throwError (forms.js:1732) で 'password' .addControl (forms.js:4454) at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:4959) at FormControlName.push../node_modules/@angular /forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:4909) で checkAndUpdateDirectiveInline (core.js:9244) で checkAndUpdateNodeInline (core.js:10512) で checkAndUpdateNode (core.js:10474) で debugCheckAndUpdateNode (core .js:11107) で debugCheckDirectivesFn (core.js:1106)

パスワードと再パスワード制御をグループ化して新しいフォーム グループを作成しようとしましたが、うまくいきません。

add-organization.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';


@Component({
  selector: 'app-add-organization',
  templateUrl: './add-organization.component.html',
  styleUrls: ['./add-organization.component.css']
})
export class AddOrganizationComponent implements OnInit {

     myform: FormGroup;
     passwords: FormGroup;
     organizationName: FormControl;
     organizationAddress: FormControl;
     pinCode: FormControl;
     mobileNumber: FormControl;
     organizationType: string[] = ["WholeSale","Retail"];
     businessType: FormControl;
     ownerName: FormControl;
     password: FormControl;
     rePassword: FormControl;
     telephoneNumber: FormControl;
     gstin: FormControl;




  createFormControls() {

     this.organizationName = new FormControl("", Validators.required);
     this.ownerName = new FormControl("", Validators.required);
     this.organizationAddress = new FormControl("", Validators.required);
     this.pinCode = new FormControl("", Validators.required);
     this.mobileNumber = new FormControl("", Validators.required);
     this.telephoneNumber = new FormControl();
     this.businessType = new FormControl("", Validators.required);
     this.gstin = new FormControl("", [Validators.required]);
     this.passwords = new FormGroup({
      password: this.password = new FormControl("",[Validators.required,Validators.minLength(8)]),
      repassword: this.rePassword = new FormControl("",[Validators.required])
      },{ validators: this.passwordValidator }
      )
  }

  passwordValidator(fb: FormGroup) {
    let password  = fb.controls.password.value;
    let repass = fb.controls.repassword.value; 
      if (repass !== password) {
        return {
          passwordMatch: {
            passwordMatch: password
          }
        }
      }
    return null;
  } 

  createForm() {
    this.myform = new FormGroup({
    ownerName: this.ownerName,
    organizationName: this.organizationName,
    organizationAddress: this.organizationAddress,
    pinCode: this.pinCode,
    mobileNumber: this.mobileNumber,
    telephoneNumber: this.telephoneNumber,
    businessType: this.businessType,
    gstin: this.gstin,
    }); 
  }

  onSubmit() {
    if (this.myform.valid) {
      console.log("Form Submitted!");
      console.log(this.myform.value);
      this.myform.reset();
    }
  }


  constructor() { }

  ngOnInit() {
    this.createFormControls();
    this.createForm();
  }

}

add-organization.html

    <mat-form-field>
            <input matInput placeholder="Set password" type = "password" formControlName="password">
            <mat-error *ngIf="password.errors?.required">Password is required</mat-error>
            <mat-error *ngIf="password.errors?.minlength">
                Password must be {{password.errors.minlength.requiredLength}} characters long, we need another {{password.errors.minlength.requiredLength - password.errors.minlength.actualLength}} characters
            </mat-error>
          </mat-form-field>
          <mat-form-field>
            <input  matInput placeholder="Re-Enter password" type = "password" formControlName="rePassword">
            <mat-error *ngIf="rePassword.errors?.required">Password is required</mat-error>
            <mat-error *ngIf="passwords.validators.passwordValidator">not match</mat-error>
   </mat-form-field>

パスワードとrePasswordの両方が同じでない場合、エラーメッセージが表示されることを期待しています

4

3 に答える 3