[解決済み】Angular 2: formGroup は FormGroup のインスタンスを期待します。1つを渡してください。
2022-02-17 07:46:23
質問
Angular 2でフォームを作成しています。私の目標は、APIからデータを取得し、それを編集のためにフォームに渡すことです。しかし、私はこのエラーに遭遇しています。
EXCEPTION: Uncaught (in promise)。エラーです。Error: ./EditPatientComponent クラスでのエラー EditPatientComponent - inline template:1:10 caused by: formGroup expects a FormGroup instance. 一つを渡してください。
以下は、エラーが発生した現在のコードです。
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がtruthyであるか、フォームグループがインスタンス化されたときのみフォームをレンダリングするようにします。
undefined
サブスクリプションに患者が入力されると
patient
のインスタンスが存在し、バインディングが機能します。これは非同期値を扱う際によくある「やらかし」です。
フォームが常に開始値を持つとは限らないので、フォーム自体の存在も確認することができます。
*ngIf
重要なのは、インスタンス化されるまでフォームがレンダリングされないという点です。
関連
-
[解決済み] Angular 2: formGroup は FormGroup のインスタンスを期待します。1つを渡してください。
-
[解決済み] 無料または手頃な価格のOCRおよびICR(手書き文字認識)SDK?[クローズド]
-
[解決済み] フォーム型Webサイト認証の決定版【終了しました
-
[解決済み] 電子メールアドレスに使用できる文字は何ですか?
-
[解決済み】Postman Chromeです。form-data、x-www-form-urlencoded、rawの違いは何ですか?
-
[解決済み】チェックしたラジオボタンのラベルをCSSセレクタで指定する方法
-
[解決済み】FormBuilderコントロールの値を手動で設定する。
-
[解決済み] Angular 2:'ngModel'が'input'の既知のプロパティではないため、バインドできない。
-
[解決済み] AngularJSでフォームが無効なときに送信ボタンを無効にする
-
[解決済み] カピバラを使って、フォームのフィールドが正しくプリフィルドされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] HTML5です。2つの入力を持つスライダーは可能か?
-
[解決済み] 無料または手頃な価格のOCRおよびICR(手書き文字認識)SDK?[クローズド]
-
[解決済み] フォーム型Webサイト認証の決定版【終了しました
-
[解決済み] 電子メールアドレスに使用できる文字は何ですか?
-
[解決済み】HTMLフォームのaction属性に空のURLを使用するのは良い方法ですか?(action="")
-
[解決済み】Postman Chromeです。form-data、x-www-form-urlencoded、rawの違いは何ですか?
-
[解決済み】GETメソッドとPOSTメソッドはいつ使うべきですか?両者の違いは何ですか?
-
[解決済み】FormBuilderコントロールの値を手動で設定する。
-
[解決済み] AngularJSでフォームが無効なときに送信ボタンを無効にする
-
[解決済み] HTML5 の input type="text" と input type="search" の比較