Help us understand the problem. What is going on with this article?

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

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スッキリしたね。

frtklog
全然関係ない業界から心機一転転職してIT業界に来ました。勉強したことをまた使う時にコピペで済ませたいがためにまとめていきたい Angular,Flutterを少しずつお勉強中
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした