カラーミーショップの一機能をAngular Elementsで実装しました - Pepabo Tech Portal
EC事業部エンジニアの@ku00です。最近は原神の聖遺物厳選に励んでいます。 この記事はECブログリレーの12日目の記事です。11日目はぱーぽーによるグーペの漸進的なフロントエンド改善を振り返るでした。 カラーミーショップにはショップ運営を助ける機能が数多くありますが、その中でも特定のショップ向けの機能（以下「プラチナプラン機能」という）がいくつかあります。この記事ではこれらの機能のうちの一つをAngular Elementsで実装し直した話をします。 Angular Elementsとは Angular Elementsとは、AngularのコンポーネントをWeb Componentsとしてパッケージ化する機能のことです。Web Componentsはフレームワークに依存せずに新しいHTML要素を定義することができるため、Vue.jsなどの別のフレームワークに組み込むこともできます。An
Angular(v8), ReactiveForm, boolean以外を使うときのチェックボックスフォームの構築の仕方 - Qiita
Angular(v8), ReactiveForm, boolean以外を使うときのチェックボックスフォームの構築の仕方TypeScriptAngularReactiveForm はじめに ReactiveFormのチェックボックスでboolean以外のvalueを扱うときのフォームの構築の仕方をまとめました。 ReactiveForm自体については説明しないので詳しいところは公式ドキュメントをご覧になってください こんな課題があったとする ReactiveFormでチェックボックスを使いたいけど値はbooleanを扱いたくない。 フォームの見た目は以下の画像のようだけど、使用者によって入力されたフォームの値を扱うときはイヌ → Dog, ネコ → Cat, ネズミ → Ratのように各チェックボックスに紐づいた別の値を使用したい。 この場合どうするか。 解決策は2つ ① フォームモデルを
Angular > Reactive Formsの使い方が初心者にわかりにくすぎるので、例を交えて取り合えず実装できる様にまとめて見た - Qiita
基本知識 使用するAPIは以下の３つです FormControl // 1個のフォームに相当。( input, checkbox...タグ 単位で用意する ) FormGroup // 複数のフォームを束ねるクラス。 ( formタグ単位で用意する ) FormArray // 同じ形式のフォームを配列で管理する。 ( address_1, address_2, address_3, ... ) 全てのクラスは抽象クラス(AbstractControl)を継承しています。 example(本題) 以下の様なフォームの実装を考えます。 ↑図が間違っていたので修正しました。(2018/7/19) 上記の図では フォームが 「単体か or 配列か」 ✖️ フォームを 「親コンポーネントに記載するか or 子コンポーネントに切り出すか」 の4パターンの実装を想定しており、この４パターンでほとんどの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A new way to validate Angular Forms - HackMD
