web-dev-qa-db-ja.com

Angular 2：formGroupはFormGroupインスタンスを想定しています。 1つ渡してください

Angular 2でフォームを作成しています。私の目標は、APIからデータを取得し、編集目的でフォームに渡すことです。しかし、私はこのエラーに遭遇しています：

例外：キャッチされません（約束）：エラー：./EditPatientComponentクラスのエラーEditPatientComponent-インラインテンプレート：1:10原因：formGroupはFormGroupインスタンスを予期しています。渡してください。

エラーのある現在のコードは次のとおりです。

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)
        })
    };

}

私を正しい方向に向けるのを助けてください/素晴らしいです！ありがとう！

formsangular
34
JessySue

サブスクリプションのpatientFormが入力されるまで、undefinedはpatientです。そのため、テンプレートの解析時にテンプレートに存在しない値にバインドしようとしています。

*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()">

重要な部分は、フォームがインスタンス化されるまでレンダリングされないことです。

71
Brandon

問題は、フォームの最初がnullであることです。

そして、ng initでのみ忍耐強くなり、作成します。開始時にフォームを初期化するか、

<section class="CreatePatient" *ngIf="patientForm">
12
Volodymyr Bilyachat