angular - 複数のコンポーネント間で Angular 2 の FormBuilder を使用する方法

Question

Ionic 2 のページで FormBuilder を使用しようとしています。

まず、ここに私の環境の詳細があります: Windows 10 で実行し、ionic --versionを実行すると、 2.0.0-beta.35が得られます

これが私のpackage.jsonファイルの一部です:

...
"@angular/common": "2.0.0-rc.3",
"@angular/compiler": "2.0.0-rc.3",
"@angular/core": "2.0.0-rc.3",
"@angular/forms": "^0.3.0",
"@angular/http": "2.0.0-rc.3",
"@angular/platform-browser": "2.0.0-rc.3",
"@angular/platform-browser-dynamic": "2.0.0-rc.3",
"ionic-angular": "2.0.0-beta.10",
"ionic-native": "1.3.2",
"ionicons": "3.0.0"
...

次に、関連する 2 つの主要なファイルを次に示します。

Insight.ts

import { Component } from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';
import {
  REACTIVE_FORM_DIRECTIVES,
  FormBuilder,
  FormControl,
  FormGroup
} from '@angular/forms';
import { App, Insight } from '../../models';
import { InsightProvider } from '../../providers/insight/insight.service';
import { InsightImage, InsightLabel, InsightLink, InsightQuestion, InsightThought, InsightTodo, InsightVideo } from './shared';

@Component({
  templateUrl: 'build/pages/insight/insight.html',
  directives: [REACTIVE_FORM_DIRECTIVES, InsightImage, InsightLabel, InsightLink, InsightQuestion, InsightThought, InsightTodo, InsightVideo],
  providers: [App, InsightProvider, FormBuilder]
})
export class InsightPage {

  canAdd: boolean;
  showDetails: boolean;
  newInsight: Insight;
  insightForm: FormGroup;

  constructor(private insightProvider: InsightProvider,
              private params: NavParams) {
    this.insightForm = new FormGroup({
      type: new FormControl('', []),
      todo: new FormControl('', []),
      checked: new FormControl(false, []),
      imageUrl: new FormControl('', []),
      link: new FormControl('', []),
      url: new FormControl('', []),
      label: new FormControl('', []),
      question: new FormControl('', []),
      answer: new FormControl('', []),
      title: new FormControl('', []),
      details: new FormControl('', []),
    });
  }

  ngOnInit() {
    this.canAdd = false;
    this.showDetails = true;
  }

  addNewInsight() {
    if (this.newInsight.type) {
      this.insightProvider.createInsight(this.newInsight)
      .subscribe(response => {
        this.newInsight.setId(response.data.id);
        this.newInsight.title = '';
        console.log(response);
      });
    }
  }

  deleteClicked(index: number) {
    console.log('Clicked on ' + index);
    this.insightProvider.deleteInsight(this.newInsight)
    .subscribe(data => {
      console.log(data);
    });
  }


}

洞察.html

<form [ngFormModel]="insightForm" (ngSubmit)="createNewInsight()">
      <ion-item>
        <ion-label for="type">Insight Type</ion-label>
        <ion-select name="type" id="type" [formControl]="type">
          <ion-option value="label">Label</ion-option>
          <ion-option value="thought">Thought</ion-option>
          <ion-option value="link">Link</ion-option>
          <ion-option value="question">Question</ion-option>
          <ion-option value="todo">Todo</ion-option>
          <ion-option value="image">Image</ion-option>
          <ion-option value="video">Video</ion-option>
        </ion-select>
      </ion-item>

      <div [ngSwitch]="type">
          <insight-image [form]="insightForm" *ngSwitchCase="'image'"></insight-image>
          <insight-label [form]="insightForm" *ngSwitchCase="'label'"></insight-label>
          <insight-link [form]="insightForm" *ngSwitchCase="'link'"></insight-link>
          <insight-question [form]="insightForm" *ngSwitchCase="'question'"></insight-question>
          <insight-thought [form]="insightForm" *ngSwitchCase="'thought'"></insight-thought>
          <insight-todo [form]="insightForm" *ngSwitchCase="'todo'"></insight-todo>
          <insight-video [form]="insightForm" *ngSwitchCase="'video'"></insight-video>
      </div>

      <button type="submit" block primary text-center (click)="addNewInsight()" [disabled]="!newInsight.type">
        <ion-icon name="add"></ion-icon> Add Insight
      </button>
    </form>

ご覧のとおり、FormGroup オブジェクトを複数のコンポーネントに渡して、それらを使用できるようにしようとしています。

コンポーネントの 1 つがどのように見えるかの例を次に示します (現在の最小バージョン)。

<ion-item>
  <ion-label floating for="link">Link</ion-label>
  <ion-input type="text" name="link" id="link" [formControl]="link"></ion-input>
</ion-item>

<ion-item>
  <ion-label floating for="url">URL</ion-label>
  <ion-input type="text" id="url" name="url" [formControl]="url"></ion-input>
</ion-item>

私が今直面している問題は、次のエラーです。

私が信じているのは、FormBuilder が typescript ファイルで宣言した特定の名前 (todo、imageUrl、link など) を探しているということですが、それは他のコンポーネントにあるため、そこにないと考えてエラーになります。 .

このエラーの原因は何ですか? オンラインで調べましたが、関連する問題は見つかりませんでした。

参考までに、同じページではなくコンポーネントでそれらを必要とする理由は、将来、入力ごとに機能が異なるため、各コンポーネントに「単一の責任」を与える必要があるためです。

前もって感謝します

score 20 · Accepted Answer

問題を抱えている他のすべての人のために

名前属性が指定されていないコントロールが見つかりません。

formControlName問題は、フォーム入力要素で定義するのを忘れていることです。

formControlName="url"

入力を修正した後に直面No provider for NgControlしている場合は、Fom 処理の Ionic2 破壊的変更に問題があります。新しいフォームコンポーネントをインポートすることで、コードを修正できる可能性があります。

import { disableDeprecatedForms, provideForms } from '@angular/forms';

しかし、おそらくこれからもますます多くの問題に直面するでしょう。コードを実際に修正するには:

最新のベータ版へのアップデート
フォームを 2 つの単純な入力に単純化する
フォームを書き直して機能させる
残りの要素を追加します

FormBuilder と検証に関する優れたチュートリアル https://blog.khophi.co/ionic-2-forms-formbuilder-and-validation/

score 0 · Accepted Answer

FormBuilder を使用する場合、テンプレートでコントロールを定義して、FormBuilder がコントロールを識別できるようにする必要があります。

したがって、コントロール「url」を持つ「insightForm」という名前の formGroup を持つテンプレートでは、次のようになります。

<form [formGroup]="insightForm" (ngSubmit)="onSubmit(insightForm.value)">
    <ion-input [formControl]="insightForm.controls['url']"></ion-input>
</form>

angular - 複数のコンポーネント間で Angular 2 の FormBuilder を使用する方法

3 に答える 3

Related

Reference