2020-02-15

【Angular】disabledプロパティによるフォームの有効性確認【[disabled]】

プログラミングプログラミング-Angular

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

概要
disabledプロパティによるフォームの有効性確認
- disabledプロパティとは？
- Angularにおけるdisabledプロパティの使い方
  - ファームの有効性確認
  - フォームの有効/無効の切替え
今後に向けて
参考

概要

「なんとなく理解とオサラバしよう！」のコーナーです！

継続するかは不明！たぶんしない！笑

フォームでよく見かけるdisabledプロパティとプロパティバインディングについて正しく理解していきます。

disabledプロパティによるフォームの有効性確認

disabledプロパティとは？

disabledとは直訳で

機能しない、無効

などを意味します。

disabledプロパティは、JavaScript(TypeScript)では要素のdisabled属性の値を取得したり、値を設定することができます。

disabled属性は要素を無効(true)にすることができます。disabled属性を有効(false)にすれば、要素はまた操作できるようになります。

Angularにおけるdisabledプロパティの使い方

Angularにおいては、disabledプロパティはプロパティバインディングと組み合わせて使うことが多くなると思います。

プロパティバインディングは、プロパティを［］で囲むバインディングで、コンポーネントからテンプレートに値を伝達することができます。

プロパティバインディングの詳細についてはこちら。

ファームの有効性確認

Angularではdisabledプロパティを使ってフォームの有効性を確認することが容易にできます。

formのテンプレート参照変数の値を利用して、送信(Submit)ボタンのdisabledプロパティを操作します。

component.html

<form (ngSubmit)="onSubmit()" #exampleForm="ngForm">
・・・
<button type="submit" class="btn btn-primary" [disabled]="!exampleForm.form.valid>送信</button>
・・・

これでフォームでエラーが発生している場合(=requiredルールに違反)、送信(Submit)ボタンも無効になります。

参考資料：

Angular 日本語ドキュメンテーション

フォームの有効/無効の切替え

フォームの有効/無効を切替えることもできます。

comopnent.ts

<input type="text" [disabled]="isFormDisabled" value="テキスト">
<button type="button" (click)="onClick()">ボタン</button>
・・・
export class AppComponent {
isFormDisabled = false;
onClick() {
this.isFormDisabled = !this.isFormDisabled;
}
}

isFormDisabled変数のture/falseをボタンで制御することができました。

プロパティバインディングがあることで、disabledプロパティが格段に操作しやすくなりますね。

参考資料：

Angular の[disabled]バインディングはtrueかfalseで効くようです | 株式会社CONFRAGE ITソリューション事業部

今後に向けて

もっと難しい内容について記事が書けるようになりたい。

参考

素晴らしい記事に感謝いたします。

Angular 日本語ドキュメンテーション

Angular の[disabled]バインディングはtrueかfalseで効くようです | 株式会社CONFRAGE ITソリューション事業部

2020-02-07

【Angular/Material】ネストがある配列データをmat-tableで表示させる

プログラミングプログラミング-Angular

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

背景
ネストがある配列データをmat-tableで表示
今後に向けて
参考

背景

ネストがある配列データをmat-tableで表示させたので、その備忘録です。

ネストがある配列データをmat-tableで表示

前提条件

データ構成

※見にくくてすみません、、、ニュアンスで分かってもらえると助かりますmm

data = {{
"column": [
0: "Name",
1: "Gender",
2: "Hobby"
],
"person": [
0: { info: {
info1: "loud",
info2: "big"
}
},
{ details: {
Name: "Taro",
Gender: "1",
Hobby: ""
}
},
1: { info: {
info1: "",
info2: ""
}
},
{ details: {
Name: "Taro",
Gender: "1",
Hobby: ""
}
},
]},{
"column": [
・・・・
]
}
}

mat-tableの基本フォーマット

参考資料：

Angular Material UI component library

component.html

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>

<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>

<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

module.ts

import { MatTableModule } from '@angular/material/table';

・・・

imports: [ ・・・, MatTableModule, ・・・]

・・・

component.ts

import {Component} from '@angular/core';

export interface PeriodicElement {
name: string;
position: number;
weight: number;
}

const ELEMENT_DATA: PeriodicElement = [
{position: 1, name: 'Hydrogen', weight: 1.0079},
{position: 2, name: 'Helium', weight: 4.0026},
{position: 3, name: 'Lithium', weight: 6.941},
{position: 4, name: 'Beryllium', weight: 9.0122},
{position: 5, name: 'Boron', weight: 10.811},
{position: 6, name: 'Carbon', weight: 12.0107},
{position: 7, name: 'Nitrogen', weight: 14.0067},
{position: 8, name: 'Oxygen', weight: 15.9994},
{position: 9, name: 'Fluorine', weight: 18.9984},
{position: 10, name: 'Neon', weight: 20.1797},
];

@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
displayedColumns: string = ['position', 'name', 'weight'];
dataSource = ELEMENT_DATA;
}

ネストがある配列データの表示

component.html

<table mat-table [dataSource]="getVariationGroup(data)">
<ng-container *ngFor="let column of data['column']">
<ng-container [matColumnDef]="column">
<th mat-header-cell *matHeaderCellDef>{{ column }}</th>
<td mat-cell *matCellDef="let personRow">
<input type='text' [(ngModel)]='personRow[column]'>
</td>
</ng-container>
</ng-container>

<tr mat-header-row *matHeaderRowDef="data['column']"></tr>
<tr mat-row *matRowDef="let row; columns: data['column'];"></tr>
</table>

component.ts

getVariationGroup(data: any): any {
const value = data.person.map((p: any) => {
return p.details;
});
return value;
}

解説

mat-tableのdataSource属性には、テーブルに表示させたいデータのKeyとValueを渡してあげます。今回の場合は、上記データのdetailsの部分になります。

matColumnDef属性には、各カラム名を入れます。ここがカラムと紐付いています。

tdタグの*matCellDef属性には、dataSourceに渡された配列データが順番に渡されます。なので、変数を定義してあげましょう。

trタグのmat-header-rowはtableのヘッダーを、mat-rowはtableの1行分の定義を行っています。

*matHeaderRowDef属性には、カラムの配列データを渡しましょう。通常はこのカラムの配列データの順番にカラムが作成されます。

*matRowDefには、tdタグの*matCellDef属性と同じようにdataSourceに渡された配列データとそれに紐付くようにカラムの配列データを渡します。

今後に向けて

インデントぐちゃぐちゃになるのどうにかしたいんだけど、どうしたらいいのかな・・・

ブログにこの記事あげたら絶対コード見にくくなってる。すみません。

次はmat-table内でmat-iconを使う方法について記事にしたいと思います。

参考

素晴らしい記事に感謝いたします。

Angular Material UI component library

2020-02-06

【Angular/MongoDB】ネストが深いオブジェクトの表示

プログラミングプログラミング-Angular

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

背景
深いネストにあるオブジェクトを表示させる
今後に向けて
参考

背景

前回記事の応用編です。

【Angular/TypeScript/MongoDB】オブジェクトデータの表示【［object Object］】 - 大田区から発信するゆるゆる日記

オブジェクトを表示させようとすると、[object Object]が表示されるときの対処方法を書きます。

今回はネストが深い場合のオブジェクトを表示させます。

分かりやすいように細かくコードを書いたので、少し不格好なコードであることはご了承ください。

深いネストにあるオブジェクトを表示させる

前提条件

今回は下記のデータをAngularのcomponent.htmlを使って表示させたいと思います。

  data = {
    "data1": [
      {
        "id": "1",
        "name": "Taro",
      },
      {
        "id": "2",
        "name": "Hanako",
      }],
    "data2": [
      {
        "id": "5",
        "food": "Tomato",
      },
      {
        "id": "6",
        "food": "Fish",
      }]
    };

1.Keyを指定(objectName.propertyName)

あるデータのみを表示させたい時に有効です。

プロパティ名(Key)を取得することができません。

例

{{ data['data1'][0]['name'] }} // ブラケット表記法
or
{{ data.data1[1].name }} // ドット表記法

結果

{{ data['data1'][0]['name'] }} // ブラケット表記法
or
{{ data.data1[1].name }}// ドット表記法

2.Object.keysメソッド(Angular6以下)

Object.keys() - JavaScript | MDN

このメソッドはオブジェクトデータのプロパティ名(Key)を配列にして返してくれます。つまり、プロパティ名だけの配列を生成してくれます。

Object.keysメソッドを使うには、Object.keysメソッドを一度変数に入れる必要があります。引数にメソッドを入れることもできます。

今回はcomponent.tsでメソッドを作らずに、オブジェクトを表示させています。

メソッドを作って、ngForやObject.Keysの引数に入れることができれば、html側で下記の例ほどngForをまわす必要はなくなります。

注意点として、ngForはオブジェクトをまわすことができません。なので、下記の例のようにobjectKeysを上手く使って配列をまわすようにしましょう。

例

component.ts

export class AppComponent {
public objectKeys = Object.keys;
}

component.html

<ng-container *ngFor="let dataKey of objectKeys(data)">
<ng-container *ngFor="let nestData of data[dataKey]">
<ng-container *ngFor="let lastNestKey of objectKeys(nestData)">
{{ key }}:{{ a[key] }}
</ng-container><br>
</ng-container><br>
</ng-container><br>

結果

id:1 name:Taro
id:2 name:Hanako

id:5 food:Tomato
id:6 food:Fish

合わせて、Object.valuesメソッドも覚えているといいかもです。

Object.values() - JavaScript | MDN

使用頻度が多そうなら、パイプ化してしまうのもいいかと思います。

(弊社ではそうしています)

3.KeyValuePipe(Angular6.1以降)

Angular

Angular6.1以降から登場したパイプです。

CommonModuleのインポートが必要です。

プロパティ名を「key」と「value」とする配列を作り、それをオブジェクトにして返します。プロパティ値には引数のプロパティ名(Key)とプロパティ値(Value)が入ります。

参考資料：【Angular/MongoDB/エラー】オブジェクトデータの表示 - 大田区から発信するゆるゆる日記

例

module.ts

import { CommonModule } from '@angular/common';

・・・

imports: [ ・・・, CommonModule,・・・ ],

・・・

component.html

<ng-container *ngFor="let dataKeyValue of data | keyvalue">
<ng-container *ngFor="let nestKeyValue of dataKeyValue.value | keyvalue">
<ng-container *ngFor="let lastKeyValue of nestKeyValue.value | keyvalue">
{{ lastKeyValue.key }}:{{ lastKeyValue .value }}
</ng-container><br>
</ng-container>
</ng-container>

結果

id:1 name:Taro
id:2 name:Hanako
food:Tomato id:5
food:Fish id:6

やっぱり表示の順番が変わる・・・

今後に向けて

かなり不格好なコードですが、流れが分かりやすいようにあえて細かく記述しました。

流れが理解できれば、自分なりのコードで修正してみてください。

参考

素晴らしい記事に感謝いたします。

[Angular]ng-forでオブジェクトのkeyとvalueを取得する方法。 - Qiita

angular - * ngForを使ってオブジェクトキーを繰り返す方法 - 答えた

2020-01-28

【Angular/MongoDB/エラー】オブジェクトデータの表示

プログラミングプログラミング-Angular プログラミング-エラー

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

背景
オブジェクトの表示
今後に向けて
参考

背景

LaravelでMongoDBからデータを取得して、Angularで表示させようとしたら、[object Object]が表示されました。

これを解決するのにとても苦労したので、その原因とデータの表示方法を備忘録として書きます。

本当はネストが深い場合でのオブジェクトデータの表示に苦労したのですが、私の場合はそもそもオブジェクトデータについて間違った認識をしていていたので、今回はネストがない場合でのオブジェクトデータの表示から詳しく書いていきます。

ネストが深い場合の記事は明日以降に書きます。

【2/6 追記】

ネストが深いオブジェクトデータの表示について記事を書きました。

【Angular/MongoDB】ネストが深いオブジェクトの表示 - 大田区から発信するゆるゆる日記

オブジェクトの表示

問題の内容

以下の環境で開発を行っています。

Angular
Laravel
MongoDB

MongoDBにあるオブジェクトをLaravelで取得し、Angularでリッチに表示させようとしていました。

Angularのcomponent.htmlで以下のコードを書いたら、サイトでは[object Object]が表示されていました。

※今回はcomponent.ts内にオブジェクトのデータを入れています。本来であれば、service.tsでLaravelからデータを取得しているので、component.ts内に下記のapiDataデータは不要です。

component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public apiData=
            {
              "id":154,
              "page_id":79,
              "user_id":1548,
              "text":"this is the first message",
              "created_at":"2019-04-10 13:54:10",
 "updated_at":"2019-04-10 13:54:10"}
}

component.html

<p *ngFor="let j of apiData">
  {{ p }}
</p>

localhost

[object Object]

原因

オブジェクトはそのままでhtmlに表示できない
オブジェクトと配列は違う
オブジェクトと連想配列は場合によっては同意義

総じると、オブジェクトと配列を同じと捉えていたのが、解決までに時間がかかってしまった原因でした。

オブジェクトはそのままではhtmlに表示をさせることができません。

また、ややこしいことにオブジェクトはjavascriptオブジェクトや連想配列とも呼ばれているのですが、JavaScriptではそれらも含めてオブジェクトと呼んでいいみたいです。文献によって言い方が違ったのでややこしかった・・・

JavaScript: 連想配列とオブジェクトの違い

JavaScript: 配列(array)とオブジェクト(object)の違い

解決方法

オブジェクトデータを配列データやjson文字列に変換すれば幸せになれそうです。

オブジェクトでの作業 - JavaScript | MDN

Angularを使っているなら、4のKeyValuePipeを使用するのが良さそうです。

※オブジェクトデータは上記に記載した【問題の内容】と同じとします。

1.Keyを指定(objectName.propertyName)

オブジェクトでの作業 - JavaScript | MDN

通常のJavaScript変数と同じように、オブジェクトのプロパティ値(Value)はドット表記、もしくはブラケット (角括弧) 記述法でプロパティ名(Key/propertyName)を指定してアクセスします。

例

{{ apiData['id'] }}

or

{{ apiData.id }}

結果

ネストが深いと、これは上手くいかないかもしれません。

あと、プロパティ名(Key)を取得することができません。

2.パイプjson

オブジェクト(javascriptオブジェクト)になっているデータをJSON文字列に変換してくれます。

プロパティ名(Key)やプロパティ値(Value)、括弧なども全て文字列に変換します。

例

{{ apiData | json}}

結果

{ "id": 154, "page_id": 79, "user_id": 1548, "text": "this is the first message", "created_at": "2019-04-10 13:54:10", "updated_at": "2019-04-10 13:54:10" }

このままでは使えないですね。

3.Object.keysメソッド(Angular6以下)

Object.keys() - JavaScript | MDN

このメソッドはオブジェクトデータのプロパティ名(Key)を配列にして返してくれます。

つまり、プロパティ名だけの配列を生成してくれます。

Object.keysメソッドを使うには、Object.keysメソッドを一度変数に入れる必要があります。

Object.keysメソッドの引数には、メソッドを入れることもできるので、とても便利なメソッドだと思います。

例

component.ts

export class AppComponent  {
  public objectKeys = Object.keys;
}

component.html

<div *ngFor="let key of objectKeys(apiData) ">
  {{ key }}:{{ apiData[key] }}
</div>

結果

id:154
page_id:79
user_id:1548
text:this is the first message to be sent by joe
created_at:2019-04-10 13:54:10
updated_at:2019-04-10 13:54:10

合わせて、Object.valuesメソッドも覚えているといいかもです。

Object.values() - JavaScript | MDN

使用頻度が多そうなら、パイプ化してしまうのもいいかと思います。

(弊社ではそうしています)

4.KeyValuePipe(Angular6.1以降)

Angular

Angular6.1以降から登場したパイプです。

CommonModuleのインポートが必要です。

{ "key": "created_at", "value": "2019-04-10 13:54:10" }
{ "key": "id", "value": 154 }
{ "key": "page_id", "value": 79 }
{ "key": "text", "value": "this is the first message to be sent by joe" }
{ "key": "updated_at", "value": "2019-04-10 13:54:10" }
{ "key": "user_id", "value": 1548 }

例

module.ts

・・・
import { CommonModule } from '@angular/common';

@NgModule({
  imports:      [  CommonModule ],
})
export class AppModule { }

component.html

<div *ngFor="let j of apiData | keyvalue">
  {{ j.key }}:{{ j.value }}
</div>

結果

created_at:2019-04-10 13:54:10
id:154
page_id:79
text:this is the first message to be sent by joe
updated_at:2019-04-10 13:54:10
user_id:1548

順番が変わる…なんでだろ？

5.for...inループ

for...in - JavaScript | MDN

すみません、あまり使わなさそうだったので省略します！

6.Object.getOwnPropertyNamesメソッド

Object.getOwnPropertyNames() - JavaScript | MDN

すみません、あまり使わなさそうだったので省略します！

7.JSON.stringify

JSON.stringify() - JavaScript | MDN

AngularでJavaScriptオブジェクトをJSON形式に変換するには？（json）：Angular TIPS - ＠IT

パイプjsonに相当します。

すみません、あまり使わなさそうだったので省略します！

なお、オブジェクト（プロパティ）の値がundefined、またはfunction型（＝メソッド）の場合は、変換の対象外です。

今後に向けて

ネストが深いともう一手間必要なんですが、この記事の内容が分かっていればさほど手間取ることはないと思います。

ネストが深い場合についてはまた今度書きます。

※コードをちょっと試す時はこれ便利。

The online code editor for web apps. Powered by Visual Studio Code. - StackBlitz

参考

素晴らしい記事に感謝いたします。

オブジェクトでの作業 - JavaScript | MDN

https://tutorialmore.com/questions-991072.htm

【Angular】KeyValuePipe の使い方 - 開発覚書はてな版

angular - * ngForを使ってオブジェクトキーを繰り返す方法 - 答えた

2020-01-14

【Angular】Angular Materialの導入

プログラミングプログラミング-Angular

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

背景
内容
今後に向けて
参考

背景

Angularアプリで簡単にレスポンシブデザインを対応させるために、Angular Materialを導入することにしました。

Angular 8.2.14
Angular Material 8.2.3

内容

Angular Materialとは？

Material Designに対応したUI部品を提供するAngular用のコンポーネント集です。

AngularアプリにMaterial Designの見た目や挙動を適用できるようになります。

ちなみにMaterial Designとは、Googleが提唱するデザインガイドラインのことです。

導入方法

非常に簡単です。

Angularアプリがあるフォルダで以下のコマンドを実行。

$ ng add @angular/material

テーマを選択します。URLを開くと、そのテーマの配色になっているAngular MaterialのHPが表示されます。

? Choose a prebuilt theme name, or "custom" for a custom theme:
❯ Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ]
Deep Purple/Amber [ Preview: https://material.angular.io?theme=deeppurple-amber ]
Pink/Blue Grey [ Preview: https://material.angular.io?theme=pink-bluegrey ]
Purple/Green [ Preview: https://material.angular.io?theme=purple-green ]
Custom

HammerJSをセットアップするか聞かれます。便利なのでYでいいでしょう。

Hammer.JS - Hammer.js

? Set up HammerJS for gesture recognition? (Y/n)

BrowserAnimationsModuleをAngular Materialにセットアップするか聞かれます。こちらも便利なのでYでいいでしょう。

Angular

? Set up browser animations for Angular Material? (Y/n)

これでAngularアプリにAngular Materialが導入されました。

使用方法

ルートモジュールのapp.module.tsにAngular Materialのモジュールをインポートします。

そして、使用したいデザインのコンポーネントをcomponent.htmlに記述します。
デザインはこちらを参考にしてください。

Angular Material UI component library

今後に向けて

データ連携の復習をします！

今はまだデザインに時間を割かない。

参考

素晴らしい記事に感謝いたします。

Angular Material UI component library Getting started

Angular Material UI component library Components

「Angular Material」で、「Angular」のWebページにMaterial Designを導入しよう (1/2)：CodeZine（コードジン）

2020-01-05

【エラー解決】error TS2339: Property 'map' does not exist on type 'Observable<User>'【canActivate/Rxjs/Udemy】

プログラミングプログラミング-Angular

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

背景
解決方法
参考

背景

UdemyのAngular講座で勉強中です。

ページ遷移の時のGuard機能を追加しようとしたところでエラーが発生しました。

原因はすぐに分かってRxjs6の仕様変更によるものでした。

今回はこのエラーを解決していきます。

解決方法

エラー内容

コード

canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
return this.afAuth.authState.map(user => {
if (!user) {
return true;
} else {
this.router.navigate(['/']);
return false;
}
});
}

エラー構文

error TS2339: Property 'map' does not exist on type 'Observable<User>'.

(直訳)
エラーTS2339：プロパティ'map'はタイプ 'Observable<User>'に存在しません。

参考サイト

エラー文にRxjsを付け加えて検索すると色々と出てきました。

angular6 - Angular & RXJS - [ts] Property 'map' does not exist on type 'Observable<User>' - Stack Overflow

FN1806004 | RxJS 6入門 06: Observableをつくる関数とオペレータ | HTML5 : テクニカルノート

RxJS

解決コード

import { map } from 'rxjs/operators';

・・・・・・

canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
return this.afAuth.authState.pipe(map(user => {
if (!user) {
return true;
} else {
this.router.navigate(['/']);
return false;
}
}));
}