为什么我们得到formGroup的错误需要一个FormGroup实例。请通过一个

Question

为什么我会收到此错误formGroup需要一个FormGroup实例。请通过一个。

.TS

editUserForm: FormGroup;

constructor(
    private fb: FormBuilder,
    private route: ActivatedRoute,
    private router: Router,
    private userService: UserService
  ) { }

ngOnInit() {
    this.personId = this.route.snapshot.paramMap.get('personid');

    if (this.personId === null || this.personId === undefined) {
      this.router.navigate(['/main/crateuser']);
    }

    this.userService.getPersonDetailAddressList(this.personId)
      .subscribe((data: any) => {
        this.personDetail = data.GetPersonDetail;
        this.personAddress = data.PersonAddresses;
        console.log(this.personDetail);
      });

    this.setUpFormControls();
  }

  setUpFormControls() {
    this.editUserForm = this.fb.group({
      prefix: [this.personDetail.Prefix],
      firstname: [this.personDetail.FirstName, Validators.required],
      middlename: [this.personDetail.MiddleName],
      lastname: [this.personDetail.LastName, Validators.required],
      extension: [this.personDetail.Extension],
      dateofbirth: [this.personDetail.DateOfBirth, Validators.required],
      placeofbirth: [this.personDetail.PlaceOfBirth, Validators.required],
      civilstatus: [this.personDetail.CivilStatus, Validators.required],
      gender: [this.personDetail.Gender, Validators.required],
      citizenship: [this.personDetail.Citizenship, Validators.required],
      occupation: [this.personDetail.Occupation],
      companyname: [this.personDetail.CompanyName],
      officephonenumber: [this.personDetail.OfficePhoneNumber],
      homephonenumber: [this.personDetail.HouseNumber],
      faxnumber: [this.personDetail.FaxNumber],
      othernumber: [this.personDetail.OtherNumber],
      mobilephonenumber: [this.personDetail.MobilePhoneNumber],
      emailaddress: [this.personDetail.EmailAddress]
    });
  }

html的

<div *ngIf="editPersonDetail">
        <form [formGroup]="editUserForm" *ngIf="personDetail">

        <div class="col-md-6">
            <div class="occupy-half">
            <mat-form-field>
                <mat-label>Prefix</mat-label>
                <input type="text" matInput formControlName="prefix">
            </mat-form-field>
            <mat-form-field>
                <mat-label>Firsname</mat-label>
                <input type="text" matInput formControlName="firstname">
                <mat-error *ngIf="firstname.invalid">
                <mat-icon matSuffix>block</mat-icon> &nbsp; {{ firstNameError() }}</mat-error>
            </mat-form-field>
            <mat-form-field>
                <mat-label>Middlename</mat-label>
                <input type="text" matInput formControlName="middlename">
            </mat-form-field>
            <mat-form-field>
                <mat-label>Lastname</mat-label>
                <input type="text" matInput formControlName="lastname">
                <mat-error *ngIf="lastname.invalid">
                <mat-icon matSuffix>block</mat-icon> &nbsp; {{ lastNameError() }}</mat-error>
            </mat-form-field>
            <mat-form-field>
                <mat-label>Extension</mat-label>
                <input type="text" matInput formControlName="extension">
            </mat-form-field>
            <mat-form-field>
                <input matInput [matDatepicker]="picker" placeholder="Choose a date" formControlName="dateofbirth">
                <mat-error *ngIf="dateofbirth.invalid">
                <mat-icon matSuffix>block</mat-icon> &nbsp; {{ dateOfBirthError() }}</mat-error>
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
            <mat-form-field>
                <mat-label>Place Of Birth</mat-label>
                <input type="text" matInput formControlName="placeofbirth">
            </mat-form-field>
            <mat-form-field>
                <mat-select placeholder="Gender" formControlName="gender">
                <mat-option *ngFor="let s of sex" [value]="s.value">
                    {{s.viewValue}}
                </mat-option>
                </mat-select>
                <mat-error *ngIf="gender.invalid">
                <mat-icon matSuffix>block</mat-icon> &nbsp; {{ genderError() }}</mat-error>
            </mat-form-field>
            </div>
        </div>

        <div class="col-md-6">
            <div class="occupy-half">

            <mat-form-field>
                <mat-select placeholder="Civil Status" formControlName="civilstatus">
                <mat-option *ngFor="let s of status" [value]="s.value">
                    {{s.viewValue}}
                </mat-option>
                </mat-select>
                <mat-error *ngIf="civilstatus.invalid">
                <mat-icon matSuffix>block</mat-icon> &nbsp; {{ civilStatusError() }}</mat-error>
            </mat-form-field>
            <mat-form-field>
                <mat-label>Citizenship</mat-label>
                <input type="text" matInput formControlName="citizenship">
                <mat-error *ngIf="citizenship.invalid">
                <mat-icon matSuffix>block</mat-icon> &nbsp; {{ citizenshipError() }}
                </mat-error>
            </mat-form-field>
            <mat-form-field>
                <mat-label>Occupation</mat-label>
                <input type="text" matInput formControlName="occupation">
            </mat-form-field>
            <mat-form-field>
                <mat-label>Company Name</mat-label>
                <input type="text" matInput formControlName="companyname">
            </mat-form-field>

            <div class="row">
                <div class="col-md-6">
                <mat-form-field class="occupy-half">
                    <mat-label>Office Phone Number</mat-label>
                    <input type="text" matInput formControlName="officephonenumber">
                </mat-form-field>
                <mat-form-field class="occupy-half">
                    <mat-label>Home Phone Number</mat-label>
                    <input type="Text" matInput formControlName="homephonenumber">
                    <input type="Text" matInput formControlName="homephonenumber">
                </mat-form-field>
                <mat-form-field class="occupy-half">
                    <mat-label>Fax Number</mat-label>
                    <input type="text" matInput formControlName="faxnumber">
                </mat-form-field>
                </div>
                <div class="col-md-6">
                <mat-form-field class="occupy-half">
                    <mat-label>Other Number</mat-label>
                    <input type="text" matInput formControlName="othernumber">
                </mat-form-field>
                <mat-form-field class="occupy-half">
                    <mat-label>Mobile Phone Number</mat-label>
                    <input type="text" matInput formControlName="mobilephonenumber">
                </mat-form-field>
                <mat-form-field class="occupy-half">
                    <mat-label>Office Phone Number</mat-label>
                    <input type="text" matInput formControlName="officephonenumber">
                </mat-form-field>
                </div>
            </div>
            <mat-form-field>
                <mat-label>Email Address</mat-label>
                <input matInput formControlName="emailaddress">
            </mat-form-field>
            <br>
            <button mat-raised-button color="primary" style="display: block; width: 100%;" [disabled]="editUserForm.invalid">Submit</button>
            </div>
        </div>

        </form>
    </div>

我在我的服务和console.log中获取了详细信息，我可以获得所有细节的值。我在添加用户的其他组件中以这种方式使用它并且没有问题。你能帮我解决这个问题吗？我真的很感激。