はじめに ReactiveFormこそAngularの花的な話をどこかで見た気がしたから軽くまとめる。 リアクティブフォームとは リアクティブフォーム は、時間とともに入力値が変わるフォームを扱うためのモデル駆動なアプローチを提供します。 このガイドでは、シンプルなフォームコントロールの作成と更新から、グループ内の複数コントロールの使用、フォームのバリデーション、高度なフォームの実装の方法を説明します。 Angular日本語ドキュメントによると上記の通りらしい。 使った感じ、入力フォームとか動的にNG出したいときとかに使えそう。 Angular日本語ドキュメントをなぞりながら簡単にまとめる。 前提条件 Angular使えてCLIも使える前提。 自分はmac(10.12.6)でやった。 Anugularは6。 準備 とりあえずCLIでプロジェクト生成する。
ngModel を独自コンポーネントで実装する手順 最初に、手順をまとめると、下記のようになります。 @Component に provider を追加 ControlValueAccessor を implement valueの getter , setter を作成 @Component に provider を追加 @Component({ selector: 'app-test-ng-model', templateUrl: './test-ng-model.component.html', styleUrls: ['./test-ng-model.component.scss'], providers: [ { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => TestNgModelCo
この記事は、Angular の公式ドキュメントのReactive Formsの章を意訳したものです。所々抜け落ち、翻訳モレがありますがあしからずご了承を。 バージョン 4.3.2 のドキュメントをベースにしています。 リアクティブフォームは、Reactive スタイルでフォームを作成するためのAngularのテクニックです。 このガイドでは、リアクティブフォームを用いて「Heroの詳細編集」フォームを作る手順を説明していきます。 Reactive Formsライブサンプル/ダウンロードサンプルを試してみてください。 また、Reactive Forms Demo /ダウンロードのサンプル版を実行し、上部の「demo picker」から実装途中のサンプルを選択することもできます。 Reactive Form について Angularは、リアクティブフォームとテンプレート駆動フォーム、2種類のフ
基本知識 使用するAPIは以下の3つです FormControl // 1個のフォームに相当。( input, checkbox...タグ 単位で用意する ) FormGroup // 複数のフォームを束ねるクラス。 ( formタグ単位で用意する ) FormArray // 同じ形式のフォームを配列で管理する。 ( address_1, address_2, address_3, ... ) 全てのクラスは抽象クラス(AbstractControl)を継承しています。 example(本題) 以下の様なフォームの実装を考えます。 ↑図が間違っていたので修正しました。(2018/7/19) 上記の図では フォームが 「単体か or 配列か」 ✖️ フォームを 「親コンポーネントに記載するか or 子コンポーネントに切り出すか」 の4パターンの実装を想定しており、この4パターンでほとんどの
概要 Angular2とionic2でformを使った際に,バリデーションが少し面倒だったので,Angular2のformについて調べてみました.この記事は The Ultimate Guide to Forms in Angular2 を元にしています.元の記事は少々長いため,以下のように二部に分けて記事にします.うまく訳せていないところもあるので,元の記事はご自身で確認いただければと思います. なおionic2に関しては第2部の最後に,フォームのサンプルを書いてみたいと思います. 第1部 FormControl FormGroup FormBuilder バリデーション 第2部 カスタムバリデーション 変更をWatchする ngModelによる双方向データバインディング ionic2に組み込んでみる 第1部ではAngular2が用意するツールを用いてバリデーションを実装するまでを見てい
システムの開発をしていると、約30%は、エラー処理の対策になると聞いたことがあります。 30%という数字は、根拠がないので置いとくとして、システムを構築する上で、エラーに対処することは、 非常に重要な設計要素であることは、間違いありません。 本記事は、私がAngularの開発を通じてエラー処理について、考えたことを整理してみました。 尚、モバイルアプリなども含めると、いろいろ複雑になるので、デスクトップ利用に限定された、業務システムということで、検討範囲を絞り込んでいます。 エラー処理設計の目的エラー処理を設計するにあたり、検討しておきたいことを挙げてみました。 発生し得るすべてのエラーを明らかにするエラー発生時の振る舞いが統一されている各画面への重複した設計記述および実装を減らす漏れなく穴をふさぐこのあたりは、Angular(SPA)だからというよりも、システムとして共通の目的ですね。
subscribe (Observer) の onError 各種 Operator よりまず subscribe (Observer) の onError です。Observable.throw でエラーを流してみましょう。 import { Observable } from 'rx'; Observable .throw(new Error('ERROR!!')) .subscribe( value => console.log(`onNext: ${value}`), error => console.log(`onError: ${error}`), () => console.log('onCompleted') ); // onError: Error: ERROR!! import { Observable } from 'rx'; Observable .from([1,
*ngForはテンプレート内で繰り返し処理を行うためのディレクティブです。 *ngForではfor-of構文を利用して繰り返し処理が行えます。 @Component({ selector: 'app', template: ` <ul> <li *ngFor="let item of items">{{item.name}}</li> </ul> ` }) export class App { items = [ {id: 1, name:'Superman'}, {id: 2, name:'Batman'}, {id: 5, name:'BatGirl'}, {id: 3, name:'Robin'}, {id: 4, name:'Flash'} ]; } 以下のようにすることで配列のインデックス番号をiというローカル変数で利用できるようになります。 <li *ngFor="let it
In this tutorial we show some nice features of Spring Security, Spring Boot and Angular working together to provide a pleasant and secure user experience. It should be accessible to beginners with Spring and Angular, but there also is plenty of detail that will be of use to experts in either. This is actually the first in a series of sections on Spring Security and Angular, with new features expos
はじめに Trusting safe values HTTP-level vulnerabilities エラーページ Cross-site request forgery (CSRF or XSRF) おわりに 参照 はじめに Angularのセキュリティ対策について調べてみる その1 Angularのセキュリティ対策について調べてみる その2 続きです。 今回はサニタイズせずに値を渡す方法、CSRF (XSRF) などを追いかけてみます。 Security - Angular Trusting safe values 以前Templateを使ってHTMLタグを挿入する場合、自動でサニタイズされることを学びました。 では信頼したHTMLなどの値を、サニタイズせずにページに反映するにはどうすべきか。 DomSanitizerのbypassSecurityTrustHtmlやbypassSe
Angular Mateiralにはinputやselect、checkbox、radioなどの入力系コントロールがありますが、inputだけreadonlyがサポートされ、他コントロールの入力可否状態はdisabled or notです。実際にアプリを開発する際にdisabledではなくreadonlyが欲しい場合があるので、どうすれば良いかを考えてみました。 試した環境 Angular 6.0.0-rc.5 Angular Material 6.0.0-rc.5 試した内容 Input inputは公式にreadonlyがサポートされているため特に工夫する必要はありません。 参考 Select selectはいわゆるドロップダウンです。見た目としては通常のinputの右側にドロップダウン可能である▼が表示されます。このコンポーネントはクリックするとdisabled状態以外ではドロップダ
Angular 2から6までの主要な進化をまとめた記事を読みたい。— Masahiko Sakakibara (@rdlabo) 2018年4月20日 逆にIonicの変遷が知りたいですね 最近Stencilも出てきたしその辺の絡みとか俯瞰的に見てみたいです— lacolaco (@laco2net) 2018年4月20日 rdlaboさんがしっかりGW明けにIonicの記事書いてくれたので、僕もAngularのv2からv6まで、3年弱の変遷についてまとめます。 Ionic 2 から 4 への、この2年間の進化を振り返る 前Angular v2時代 Angular v2 オフラインコンパイル AngularJSへの .component 逆輸入 Animation API Language Service Angular CLIとスタイルガイド SystemJSからwebpackへ For
Angularデベロッパーズガイド 高速にかつ堅牢に動作するフロントエンドフレームワーク 出版社/メーカー: インプレス発売日: 2017/12/08メディア: 単行本(ソフトカバー)この商品を含むブログを見る AngularによるモダンWeb開発 実践編~実際の開発で必要な知識を凝縮~ 作者: 末次章出版社/メーカー: 日経BP社発売日: 2017/11/24メディア: 単行本この商品を含むブログを見る Angular でファイルをドラッグ & ドロップで選択させる UI を実現するためのディレクティブを作った。 世間には ngx-uploader や ng2-file-drop、ng2-file-upload など、似たようなライブラリはあるのだが、いずれも少々大仰で、ファイルアップロード機能込みで提供されていたりして鬱陶しかったので、最も基本的な部分だけを抜き出して自作することにした
Throughout this tutorial, we’ll be using Angular 6 to build a Progressive Web Application, step by step, implementing the core tenets of PWAs using Angular CLI v6. In this tutorial, we’ll be using the latest Angular 6 to build a PWA by implementing the core tenets that make a PWA. We’ll start by creating a front-end web application that consumes a JSON API. For this matter, we’ll be using the Angu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く