10

Form Builder (Angular2 Beta 1、TypoScript) を使用して作成されたフォームがあります。つまり、次のようなものがありconstructorます。

this.form = this._formBuilder.group({
    'username': ['', Validators.required],
    'email': ['', Validators.required]
});

フォームが表示され、これまでのところすべてが順調です。私が実際に理解していないのは、データ (この場合は User オブジェクト) をリモート サービス (ま​​たは他の非同期読み込みメカニズム) から読み込むときにバインドを処理する方法です。

私が試したことは、次のとおりです。

  • constructorまたはでデータを非同期にロードしますngOnInit。問題: ロードが開始される前であっても、例外がスローされます (「未定義のプロパティ 'validator' を読み取れません...」)
  • constructorまたはでデータを非同期にロードしますngOnInitが、その前に空のフォームを作成します。問題: 検証が機能しません。
  • 私が期待していたのは、フォームデータをオブジェクトのプロパティにバインドし、Userそのオブジェクトのプロパティを設定することです。問題: 例外ではありませんが、データがフォームに表示されません。

これを機能させるには、よりスマートでより良い方法が必要だと思いますか?私は Angular2 にかなり慣れていないので、質問がばかげていないことを願っています …</p>

- - アップデート - -

ngFormModelまず、重要な場合に備えて、フォームで使用することを忘れていました。

@Thierry: 「フォームにバインドする一時的な空のオブジェクト」は、私がやろうとしたこと (上記の 3 番目のアプローチ) だと思いますが、うまくいきませんでした。正確には、私はこれを試しました:

constructor(private _formBuilder:FormBuilder) {
    this.user = new User;
    this.user.username = 'abc';
    this.form = this._formBuilder.group({
        'username': [this.user.username, Validators.required],
    });
}

これはユーザー名を表示しますが、コンストラクターの最後に設定する行を移動しても機能しませんthis.user.username。データバインディングがこれを処理することを期待していたので、これはかなり驚くべきことです。

4

4 に答える 4

6

これにはいくつかの解決策があります。

  • を活用し*ngIfて、データがある場合にのみフォームを表示します
  • @CanActivate(ルーティングを使用する場合) デコレーターを活用して、データがある場合にのみ、フォームがあるコンポーネントを表示します。
  • 一時的な空のオブジェクトを使用してフォームにバインドします。データが存在する場合、このオブジェクトに受信したデータを入力 (またはオーバーライド) できます。

ここに plunkr があります: https://plnkr.co/edit/metUkOB7Sqfyr9DtCLR0?p=preview

お役に立てば幸いです、ティエリー

于 2016-02-03T15:49:18.373 に答える
5

データがロードされた後、FormGroup 内の個々のコントロールを更新することもできます。例えば:

this._http.get('/user/123')
    .map(response => response.json())
    .subscribe(user => {
        this.form.find('username').updateValue(user.username);
        this.form.find('email').updateValue(user.email);
    })

重要な部分は、formGroup のコントロール インスタンスを見つけて、その値を更新できることです。または単純な

this.form.controls.username.updateValue(user.username)

も機能します。

アップデート。username最近のバージョンでは API が変更されているため、getterでアクセスする必要があることに注意してください。

this.form.get('username').setValue(user.username)
于 2016-02-03T16:21:10.240 に答える