为什么我会收到此错误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> {{ 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> {{ 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> {{ 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> {{ 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> {{ 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> {{ 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中获取了详细信息，我可以获得所有细节的值。我在添加用户的其他组件中以这种方式使用它并且没有问题。你能帮我解决这个问题吗？我真的很感激。