[angular] 앵귤러 form material 입력 작업 비교

 

오늘은 데이터 입력 화면을 하나 만들어 테스트 해보겠습니다.

입력 폼을 두개 만들어 비교를 하고 모양은 아래와 같습니다.

 

form을 두개 만들고 데이터를 입력하여 어떻게 처리 되는지 보려고 합니다.

상단 폼은 일반적인 형태의 폼 테그입니다.

두번째는 Angular Material을 사용한 입력 폼 입니다.

 

작업할 파일은 다음 그림과 같습니다.

위에 2개의 파일이 주요 작업 대상이고 나머지는 그냥 설정 파일들 입니다.

작업 순서

이전에 했던  component 추가 파일을 가지고 작업합니다.

[angular] component 추가 방법

1. 먼저 기존 화면을 수정합니다.  기존화면은 Angular 마크가 커다랗게 나왔는데 모두 주석처리 합니다.

2. css 파일 생성

3. html 파일에 form 2개 추가

4. module에 material 관련 import

5. 변수 및 버튼 클릭 이벤트 함수 생성

6. 테마 추가

7. 화면 테스트

이런식으로 진행 됩니다.

1. 메인 화면 주석 처리

/src/app/app.component.html

파일을 열고 모두 주석 처리를 하여 새로 추가한

/src/app/company-vision/company-vision.component.html 화면만 나오도록 합니다.

 

2. css 파일 생성

company-vision 관련 화면에만 나오도록 하려면 company-vision.component.css 여기에 추가하면 됩니다.

저는 전체에 적용하는 것으로 작업 합니다.

2.1 폴더 및 파일 생성

먼저 css 폴더를 생성 합니다.

assets에 마우스를 놓고 우측 버튼을 클릭해서 New를 선택하고 Folder를 선택합니다.

 

폴더 생성 팝업 창이 나타납니다.

Folder name:에 css를 입력 합니다.

 

만드는 김에 혹시나 해서 이미지 폴더도 만들었습니다.

Folder name:에 images를 입력 합니다.

 

생성된 css 폴더에 css 파일을 하나 생성 합니다.

 

css 폴더에 마우스를 놓고 우측 버튼 > New 선택 > Other… 선택

 

창이 열리면 Web을 찾아서 펼칩니다.

CSS File을 선택하고 하단의 Next 버튼을 클릭 합니다.

 파일 이름을 저는 form.css로 정했습니다. 각자 편한 이름으로 기입하시고 [Finish] 버튼을 클릭 합니다.

form.css 파일이 생성 되었습니다.

필요한 내용을 적어줍니다. 소스는 하단에 추가 하겠습니다.

2.2 CSS 반영

새로 추가한 form.css를 반영해보겠습니다.

/app/company-vision/company-vision.component.ts

파일을 열고 기존 css 파일은 주석처리 또는 삭제하고 신규 파일의 path도 같이 추가를 하면 되는데

css 파일의 path 잡기가 어렵지 않습니다.

자동 완성 기능이 있어서 아주 쉽게 처리 할 수 있습니다.

path와 file도 자동으로 완성 기능이 적용 됩니다.

styleUrls: ['../../assets/css/form.css']

3. html 파일에 form 2개 추가

이제 화면 작업을 진행 합니다.

/src/app/company-vision/company-vision.component.html

파일을 열고 열심히 코딩 합니다.

3.1 일반 형태의 form

<form>
    <h3>Input Data</h3>

    <div>
        <label for="vision1">Vision :</label>
        <input name="vision1" #vision1> 
    </div>
    <div>
        <label for="name1">Name :</label>
        <input name="name1" #name1> 
    </div>
    <div>
        <label for="email1">e-mail :</label>
        <input name="email1" #email1>
    </div>

    <button (click)="addArticle1(vision1, name1, email1.value)">
    Submit
    </button>
</form>
Input Data :  {{name3}} / {{email3}}

 

<input name="vision1" #vision1>

<input name="name1" #name1>

<input name="email1" #email1>

name1과 email1으로 input을 정의 하였고

 

<button (click)="addArticle1(name1, email1)">

버튼 클릭시 addArticle1() 가 실행되도록 연결하였습니다.

 

Input Data :  {{name3}} / {{email3}}

하단에 입력한 값을 보여주도록 했습니다.

3.2 Material 형태의 form

<div class="divcenter">
 <h3>Input Data2</h3>

<div class="example-container">
    <mat-form-field>
        <input matInput #vision2 placeholder="Vision">
    </mat-form-field>
    <mat-form-field>
        <input matInput #name2 placeholder="Name">
    </mat-form-field>
    <mat-form-field>
        <input matInput #email2 placeholder="e-mail">
    </mat-form-field>
    <div class="example-button-row">
        <button mat-raised-button color="primary"
        (click)="addArticle2(vision2, name2, email2.value)">Submit</button>
    </div>
</div>
</div>

Input Data :  {{name4}} / {{email4}}

 

<input matInput #vision2 placeholder="Vision">

<input matInput #name2 placeholder="Name">

<input matInput #email2 placeholder="e-mail">

 

name2와 email2으로 input을 정의 하였고

태그들이 mat-으로 시작합니다.

 

<button (click)="addArticle1(vision1, name1, email1.value)">

버튼을 클릭하면 addArticle2() 함수가 실행되도록 하였습니다.

 

입력한 데이터는 화면에서 볼 수 있도록

Input Data :  {{name4}} / {{email4}}

하였고요.

4. module에 material 관련 import

mat-으로 시작하는 material 태그들이 작동되려면 모듈들을 import 해야 합니다.

/src/app/app.module.ts

파일을 열고 import 해줍니다.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatFormFieldModule } from '@angular/material/form-field';

import { MatInputModule } from '@angular/material';

import { MatButtonModule } from '@angular/material/button';

import 한다고 적용이 되는게 아니고 반영을 해야 합니다.

imports: [

BrowserModule,

BrowserAnimationsModule,

MatFormFieldModule,

MatInputModule,

MatButtonModule

],

뒤에 공백이 있으면 오류가 발생합니다.

앞에 콤마를 찍어도 오류 표시가 나오니까 형식대로 입력 합니다.

5. 변수 및 버튼 클릭 이벤트 함수 생성

이곳에서 실제 코딩이 진행됩니다.

name3: string;

name4: string;

email3: string;

email4: string;

5.1 일반 폼

일반 폼의 버튼을 선택 했을 때 작동하는 이벤트 함수를 생성합니다.

  addArticle1(vision1: HTMLInputElement, name1: HTMLInputElement, email1: string): boolean {
    alert(`Adding article title: ${name1.value} and link: ${email1}`);
    this.companyVision = vision1.value;
    this.name3 = name1.value;
    this.email3 = email1;
    return false;
 }

화면에서 변수를 보낼 때 일반적으로 보내는 방법과 값만 보내는 방법을 사용 했고

addArticle1(vision1, name1, email1.value)

email1은 값만 보내는 방식입니다.

받는 곳에서도 값만 보낸 경우는 string으로 받습니다.

vision1: HTMLInputElement, name1: HTMLInputElement, email1: string

 

받은 값은 변수에 대입할 때도 다르게 적용 합니다.

this.name3 = name1.value;

this.email3 = email1;

 

5.2 Material 폼

두번째 입력 폼은 Angular Material을 사용해 작업을 했습니다.

  addArticle2(vision2: HTMLInputElement, sample1: HTMLInputElement, sample2: string): boolean {
    alert(`Adding article title: ${sample1.value} and link: ${sample2}`);
    this.companyVision = vision2.value;
    this.name4 = sample1.value;
    this.email4 = sample2;
    return false;
 }

그리고 변수도 수정을 했는데요.

보내준 parameter 명을 다르게 받아왔습니다.

사실 실제 코딩에서는 이렇게 해놓으면 헤깔려서 짜증이 나겠죠.

 

vision2: HTMLInputElement, sample1: HTMLInputElement, sample2: string

 

name2를 sample1으로 email2를 sample2로 받아 와서 작업을 하였습니다.

 

코딩도 별로 어려울게 없죠?

6. 테마 추가

글을 입력할 때 기존 글자까 휙 하고 위로 올라가는 기능은 테마가 해주는 건데요.

/src/styles.css

파일에 4개의 Theme중 하나를 적어 줍니다.

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

4가지 테마는 다음과 같습니다.

deeppurple-amber.css

indigo-pink.css

pink-bluegrey.css

purple-green.css

7. 화면 테스트

이제 테스트를 해볼까요?

 

프로젝트에 마우스를 대고 우측 버튼 > Run As > Angular Web Application을 선택하면

 

 

이제 첫번째 폼에 입력 테스트를 해봅니다.

 

사장이 돈이 오라고 하네요.

직원은 사장 집에 가라 케라 하는군요.

8. Source Code

복사코딩을 위해 소스를 올립니다.

/myNgProject/src/app/company-vision/company-vision.component.html

<h1>
<p>
  company-vision : {{companyVision}}!!
  
</p>
</h1>


<form>
    <h3>Input Data</h3>

    <div>
        <label for="vision1">Vision :</label>
        <input name="vision1" #vision1> 
    </div>
    <div>
        <label for="name1">Name :</label>
        <input name="name1" #name1> 
    </div>
    <div>
        <label for="email1">e-mail :</label>
        <input name="email1" #email1>
    </div>

    <button (click)="addArticle1(vision1, name1, email1.value)">
    Submit
    </button>
</form>
Input Data :  {{name3}} / {{email3}}

<div class="divcenter">
 <h3>Input Data2</h3>

<div class="example-container">
    <mat-form-field>
        <input matInput #vision2 placeholder="Vision">
    </mat-form-field>
    <mat-form-field>
        <input matInput #name2 placeholder="Name">
    </mat-form-field>
    <mat-form-field>
        <input matInput #email2 placeholder="e-mail">
    </mat-form-field>
    <div class="example-button-row">
        <button mat-raised-button color="primary"
        (click)="addArticle2(vision2, name2, email2.value)">Submit</button>
    </div>
</div>
</div>

Input Data :  {{name4}} / {{email4}}

/myNgProject/src/app/company-vision/company-vision.component.ts

import { Component, OnInit } from '@angular/core';
import { Alert } from 'selenium-webdriver';

@Component({
  selector: 'app-company-vision',
  templateUrl: './company-vision.component.html',
  styleUrls: ['../../assets/css/form.css']
  /*styleUrls: ['./company-vision.component.css'] */
})
export class CompanyVisionComponent implements OnInit {

  companyVision: string;
  name3: string;
  name4: string;
  email3: string;
  email4: string;
  constructor() {
    this.companyVision = 'Good Good!!';
    this.name3 = ' ';
    this.email3 = ' ';
  }

  addArticle1(vision1: HTMLInputElement, name1: HTMLInputElement, email1: string): boolean {
    alert(`Adding article title: ${name1.value} and link: ${email1}`);
    this.companyVision = vision1.value;
    this.name3 = name1.value;
    this.email3 = email1;
    return false;
 }

  addArticle2(vision2: HTMLInputElement, sample1: HTMLInputElement, sample2: string): boolean {
    alert(`Adding article title: ${sample1.value} and link: ${sample2}`);
    this.companyVision = vision2.value;
    this.name4 = sample1.value;
    this.email4 = sample2;
    return false;
 }



  ngOnInit() {
  }

}

/myNgProject/src/app/app.component.html

얘는 전체 주석처리만 했음.

/myNgProject/src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CompanyVisionComponent } from './company-vision/company-vision.component';

// Material - animation
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [
    AppComponent,
    CompanyVisionComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent, CompanyVisionComponent]
})
export class AppModule { }

/myNgProject/src/assets/css/form.css

@charset "UTF-8";

form {
    margin: 0 auto;
    width: 500px;
    padding: 10px;
    border: 1px solid #CCC;
    background-color: #cccccc;
}

form div + div {
    margin-top: 5px;
}

label {
    display: inline-block;
    width: 100px;
    text-align: right;
}

input, textarea {
    width: 300px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

textarea {
    vertical-align: top;
    height: 100px;
}

button {
    margin-left: 10em;
}

.example-container {
  display: flex;
  flex-direction: column;
}

.example-container > * {
  width: 100%;
}

.example-button-row button,
.example-button-row a {
  margin-right: 8px;
}

.divcenter {
    margin: 0 auto;
    width: 500px;
}

/myNgProject/src/styles.css

/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

- copy coding -