Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@frtklog

【Angular】コンポーネント化したinputを使い回す

More than 1 year has passed since last update.

AngularMaterialで入力フォーム。

前記事
【Angular】FormGroupで入力フォームを作る

入力フォーム、複数個扱うことが多いと思います

スクリーンショット 2020-05-23 10.36.22.png

3つ作っただけでも

<form [formGroup]="form">
  <mat-form-field>
    <mat-label>名前</mat-label>
    <input
      matInput
      placeholder="名前"
      [formControl]="formCtr('name')"
      (keyup)="output()"
    />
    <mat-error>必須項目</mat-error>
  </mat-form-field>
  <mat-form-field>
    <mat-label>ID</mat-label>
    <input
      matInput
      placeholder="ID"
      [formControl]="formCtr('id')"
      (keyup)="output()"
    />
    <mat-error>必須項目</mat-error>
  </mat-form-field>
  <mat-form-field>
    <mat-label>好物</mat-label>
    <input
      matInput
      placeholder="好物"
      [formControl]="formCtr('fav')"
      (keyup)="output()"
    />
    <mat-error>必須項目</mat-error>
  </mat-form-field>
  <div class="btn-box">
    <button mat-raised-button color="primary" [disabled]="this.form.invalid">
      登録
    </button>
  </div>
</form>
import { Component, OnInit } from "@angular/core";
import {
  FormGroup,
  FormBuilder,
  Validators,
  AbstractControl,
} from "@angular/forms";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent implements OnInit {
  form: FormGroup;
  get groupCtr() {
    return this.form.controls;
  }
  formCtr(name: string) {
    return this.groupCtr[name];
  }

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      name: ["", [Validators.required, Touched]],
      id: ["", [Validators.required, Touched]],
      fav: ["", [Validators.required, Touched]],
    });
  }

  output() {
    console.log(this.form.value);
  }
}
function Touched(formCtl: AbstractControl) {
  if (formCtl.touched) {
    if (!!formCtl.value) {
      return null;
    } else {
      return { Touched: true };
    }
  } else {
    return null;
  }
}

htmlがごちゃごちゃしてきた…

inputをコンポーネント化して使いまわしてみましょう

ng g c form-part/input

Inputを使ってformControl、placeholder,labelを受け取れるようにします
Inputは親コンポーネントから子コンポーネントに値を受け渡したいときに使います

import { Component, Input } from "@angular/core";
import { AbstractControl } from "@angular/forms";
export class InputComponent {
  @Input() ctrName: AbstractControl;
  @Input() ph: string;
  @Input() la: string;

  constructor() {}

  output() {
    console.log(this.ctrName.value);
  }
}
<mat-form-field>
  <mat-label>{{ this.la }}</mat-label>
  <input
    matInput
    [placeholder]="ph"
    [formControl]="ctrName"
    (keyup)="output()"
  />
  <mat-error>必須項目</mat-error>
</mat-form-field>

親コンポーネントのインプット部分をapp-inputに置き換えます

<form [formGroup]="form">
  <app-input [ctrName]="formCtr('name')" ph="名前を入力" la="名前"></app-input>
  <app-input [ctrName]="formCtr('id')" ph="IDを入力" la="ID"></app-input>
  <app-input [ctrName]="formCtr('fav')" ph="好物を入力" la="好物"></app-input>
  <div class="btn-box">
    <button
      mat-raised-button color="primary"
      [disabled]="this.form.invalid" (click)="getValue()"
    >
      登録
    </button>
  </div>
</form>
import { Component, OnInit } from "@angular/core";
import {
  FormGroup,FormBuilder,Validators,AbstractControl} from "@angular/forms";

export class AppComponent implements OnInit {
  form: FormGroup;

  get groupCtr() {
    return this.form.controls;
  }
  formCtr(name: string) {
    return this.groupCtr[name];
  }

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      name: ["", [Validators.required, Touched]],
      id: ["", [Validators.required, Touched]],
      fav: ["", [Validators.required, Touched]],
    });
  }

  getValue() {
    console.log(this.form.value);
  }
}
function Touched(formCtl: AbstractControl) {
  if (formCtl.touched) {
    if (!!formCtl.value) {
      return null;
    } else {
      return { Touched: true };
    }
  } else {
    return null;
  }
}

スクリーンショット 2020-05-23 11.33.15.png
スクリーンショット 2020-05-23 11.33.02.png
ボタンを押したらちゃんと全部取得できました。htmlスッキリしたね。

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
frtklog
全然関係ない業界から心機一転転職してIT業界に来ました。Angular,Flutterを少しずつお勉強中

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?