私はAngular 2でフォームを作成しています。私の目標は、APIからデータを取得し、それを編集のためにフォームに渡すことです。しかし、私はこのエラーに遭遇しています:
EXCEPTION: Uncaught (in promise)です:エラーです:./EditPatientComponent クラス EditPatientComponent - inline template:1:10 caused by: formGroup は FormGroup インスタンスを期待しています。1つ渡してください。
以下、エラーの出ている現在のコードです。
html
<section class="CreatePatient">
<form [formGroup]="patientForm" (ngSubmit)="onSubmit()">
<div class="row">
<div class="form-group col-12 col-lg-3">
<label for="firstName">First Name</label>
<input formControlName="firstName" type="text" class="form-control" id="firstName" >
</div>
<div class="row">
<div class="col-12 col-lg-2">
<button type="submit" name="submit" class="btn btn-block btn-primary">Save</button>
</div>
</div>
</form>
</section>
ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { PatientService } from './patient.service';
import { Patient } from './patient';
@Component({
templateUrl: 'editpatient.component.html'
})
export class EditPatientComponent implements OnInit {
errorMessage: string;
id: string;
editMode = true;
private patientForm: FormGroup;
private patient: Patient;
constructor(
private patientService: PatientService,
private router: Router,
private activatedRoute: ActivatedRoute,
private formBuilder: FormBuilder) {
console.log("routes");
console.log(activatedRoute.snapshot.url[1].path);
}
ngOnInit() {
this.getPatient();
}
getPatient() {
this.patientService.getPatient(this.activatedRoute.snapshot.url[1].path)
.subscribe(
patient => {
this.id = this.activatedRoute.snapshot.url[1].path;
this.patient = patient;
this.initForm();
},
error => this.errorMessage = <any>error);
}
onSubmit(form){
console.log(this.patientForm);
// Post the API
};
initForm() {
let patientFirstName = '';
if (this.editMode) {
console.log(this.patient.firstName);
console.log(this.patient.lastName);
console.log(this.patient.participantUuid);
patientFirstName = this.patient.firstName;
}
this.patientForm = new FormGroup({
'firstName': new FormControl(patientFirstName)
})
};
}
何かお手伝い・ご指南いただけると助かります!ありがとうございます!
あなたの patientForm
は、サブスクリプションの patient
が入力されるまでは undefined
です。そのため、テンプレートが解析された時点でテンプレートに存在しない値にバインドしようとしていることになります。
患者が真実である場合、またはフォームグループがインスタンス化されている場合にのみフォームをレンダリングするための *ngIf
を追加しました:
<section class="CreatePatient">
<form *ngIf="patient" [formGroup]="patientForm" (ngSubmit)="onSubmit()">
<div class="row">
<div class="form-group col-12 col-lg-3">
<label for="firstName">First Name</label>
<input formControlName="firstName" type="text" class="form-control" id="firstName" >
</div>
<div class="row">
<div class="col-12 col-lg-2">
<button type="submit" name="submit" class="btn btn-block btn-primary">Save</button>
</div>
</div>
</form>
</section>
患者がサブスクリプションに入力されると、patientForm
インスタンスが存在し、バインディングが機能します。これは、非同期値を扱うときによくあることです。
フォームが常に開始値を持つとは限らないので、フォーム自体の存在も確認することができます:
<form *ngIf="patientForm" [formGroup]="patientForm" (ngSubmit)="onSubmit()">
重要なのは、フォームがインスタンス化されるまでレンダリングされないという点です。
問題は、あなたのフォームが冒頭でNULLになっていることです。
そして、ng initのときだけ、患者を取得し、その後、作成することになります。フォームを初期化するのは、最初の方か、あるいは
<section class="CreatePatient" *ngIf="patientForm">
リアクティブフォームの問題に直面している人たち まず、component.ts ファイルで、次のようにインポートしてください:
import { FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
export class NewsfeedformComponent implements OnInit {
NewsfeedForm: FormGroup;
constructor(private _formBuilder: FormBuilder){}
ngOnInit() {
this.lookupService.getStatus().subscribe((status: IStatus) => {
this.status = status;
});
this.NewsfeedForm = this._formBuilder.group({
NewsfeedID: [0,null],
StatusID: ['', Validators.required],
publishdate: ['', Validators.required]
})
}
}
をコンポーネント html ファイルに追加します。
<form class="form-container" [formGroup]="NewsfeedForm"
#newsFeedform="ngForm" (ngSubmit)="form1()">
<div id="rowTwo" fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
<mat-form-field appearance="outline">
<mat-label>Status</mat-label>
<mat-select formControlName="StatusID" required>
<mat-option></mat-option>
<mat-option *ngFor="let itemofStatus of status" [value]="itemofStatus.StatusID">
{{itemofStatus.Status}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<input matInput [matDatepicker]="publishdate" placeholder="Publish Date"
formControlName="publishdate">
<mat-datepicker-toggle matSuffix [for]="publishdate"></mat-datepicker-toggle>
<mat-datepicker #publishdate></mat-datepicker>
</mat-form-field>
</div>
</form>;