web-dev-qa-db-ja.com

Angular強く型付けされた反応形式

私はAngularプロジェクトの大きなコンポーネントをリファクタリングしようとしています。

私は強く型付けされた無効形態を実装するための良い方法を探しています。誰かが自分の経験から提案/推奨事項を提供することができますか？

ありがとうございました。

編集：

明確にするには、強く型付けされたことで、私がフォームグループまたはフォームアレイを作成したときに現在、私はその中の実際の形式の構造を指定する方法がありません。私がこのフォームを私のアプリのさまざまなコンポーネントに渡すと、それから私はそれを維持することをより困難にしていると感じています。

angulartypescriptangular-reactive-formsreactive-forms
11
Tom Vinnicombe

私は似た問題を抱えていて、これは私の解決策でした。私は本当にフォーム自体ではなくフォームの 'value'のタイプを気にかけています。それはこのようなものを見て終わりました。

export interface UserFormValue {
  first_name: string
  last_name: string
  referral: string
  email: string
  password: string
}
...

ngOnInit() {
  this.userForm = this.fb.group({
    first_name: [ '', Validators.required ],
    last_name: [ '', Validators.required ],
    referral: [ '' ],
    email: [ '', [ Validators.required, Validators.email ] ],
    password: [ '', [ Validators.required, Validators.minLength(8) ] ],
  });
}

...
 _

その後、テンプレートで値を送信してください

<form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm.value)">
   ...
</form>

 _

これで送信機能にタイプを追加できます

onSubmit(userForm: UserFormValue) {
   ...
}
 _

それは完璧ではありませんが、私のユースケースには十分良かったです。私は本当にこのようなものがあったことを望みます。

userForm: FormGroup<UserFormValue> _

0
john mason

私が使用していた解決策は ngx-crope-typed-formsと呼ばれるライブラリが見つかりました

これにより、強く型付けされたFormControl、FormGroups、およびFormArraysを持つことができます。いくつかの制限がありますが、それは私のプロジェクトでは間違いなく多くのものを助けました。

マニュアルを見ることができます https：//github.com/no0x9d/ngx-styped -forms

0
Tom Vinnicombe