Copy Coding

from에서 자주 사용하는 태그들에 대한 값을 설정하는 기본적인 방법을 알아봅니다.  전에 설명한 form 태그에서 값을 읽어오는 방법과 연결된 내용입니다.

먼저 jQuery 버전에 따라 기능 사용법이 다를 수 있어 사용된 jQuery 버전 정보는 아라와 같습니다.

<script src="https://code.jquery.com/jquery-3.7.0.js"></script>

1. input tag 값 설정

- input tag 사용 방법

다음과 같이 input tag를 추가하고 id, class, name을 설정합니다.

<input type="text" id="input_id" class="input_class" name="input_name">

- input tag 값 설정 방법

input tag에 설정한 id, class, name을 이용하여 input box에 아래와 같은 방법으로 값을 설정합니다.

    //id 로 값 설정

    $("#input_id").val("set input Value by id");

    //class 로 값 설정

    $(".input_class").val("set input Value by class");

    //name으로 값 설정

    $('input[name="input_name"]').val("set input Value by name");

2. textarea tag 값 설정

- textarea tag 사용 방법

다음과 같이 text tag를 추가하고 id, class, name을 설정합니다.

<textarea id="textarea_id" class="textarea_class" name="textarea_name"></textarea>

- textarea tag 값 설정 방법

textarea tag에 설정한 id, class, name을 이용하여 값을 아래와 같은 방법으로 설정할 수 있습니다.

input box와 동일한 방법 입니다.

    //id 로 값 설정

    $('#textarea_id').val("set textarea Value by id");

    //class 로 값 설정

    $('.textarea_class').val("set textarea Value by class");

    //name으로 값 설정

    $('textarea[name=textarea_name]').val("set textarea Value by name");

3. select tag 값 설정

- select tag 사용 방법

아래와 같이 select tag를 추가하고 id, class, name을 설정합니다.

            <select id="sel_id" class="sel_class" name="sel_name">

              <option value="s1">select1</option>

              <option value="s2">select2</option>

              <option value="s3">select3</option>

            </select>

- select에 value를 이용한 설정 방법

select tag에 설정한 id, class, name을 이용하여 value 값을 설정하는 방법으로 아래와 같이 선택이 되도록 합니다.

    //id 로 값 설정

    $('#sel_id').val("s2");

    //class 로 값 설정

    $('.sel_class').val("s3");

    //name으로 값 설정

    $("select[name='sel_name']").val("s1");

- select의 text를 이용한 설정 방법

- select tag에 사용한 text를 이용하여 선택이 되도록 설정할 수 있습니다.

    //id 로 값 설정

    $("#sel_id option:selected").text("select2");

    //class 로 값 설정

    $(".sel_class option:selected").text("select3");

    //name으로 값 설정

    $("select[name='sel_name'] option:selected").text("select1");

- 한가지 더 select 항목의 순서를 이용하여 선택을 설정하는 방법입니다.

    //--Select by index 로 값 설정

    document.getElementById("sel_id").options.selectedIndex = 1;

4. radio tag 값 설정

- radio tag 사용 방법

radio tag를 추가하고 id, class, name을 설정합니다.

<input type="radio" name="ra_name" class="ra_class1" id="ra_id1" value="radio1"> radiooo

<input type="radio" name="ra_name" class="ra_class2" id="ra_id2" value="radio2"> radiiii

<input type="radio" name="ra_name" class="ra_class3" id="ra_id3" value="radio3"> raddddd

- 설정한 id, name, class를 이용하여 radio button을 체크 하거나 체크 해제를 할 수 있습니다.

    //id 로 값 설정

    $('#ra_id1').attr('checked', true);

    $('#ra_id1').attr('checked', false);

    $("#ra_id1").prop("checked", true);

    $("#ra_id1").prop("checked", false);

    //class 로 값 설정

    $('.ra_class2').attr('checked', true);

    $('.ra_class2').attr('checked', false);

    //name으로 값 설정

    $('input:radio[name=ra_name][value=radio1]').attr('checked', true);

    $('input:radio[name="ra_name"][value="radio2"]').prop('checked', true);

    var radValue = "radio3";

    $('input:radio[name="ra_name"][value='+radValue+']').prop('checked', true);

동일한 내용을 한쌍으로 만들었습니다.

true는 선택이고 false는 선택 해제입니다.

false를 먼저 주석 처리하고 하나씩 테스트 해보면 됩니다.

5. checkbox tag 값 설정

- checkbox tag 사용 방법

checkbox를 추가하고 id, class, name을 설정합니다.

<input type="checkbox" name="chk_name1" id="chk_id1" class="chk_class1" value="chk01">Check01

<input type="checkbox" name="chk_name2" id="chk_id2" class="chk_class2" value="chk02">Check02

<input type="checkbox" name="chk_name3" id="chk_id3" class="chk_class3" value="chk03">Check03

- checkbox 값 설정 방법

각 소스는 쌍으로 true, false로 체크와 체크 해제를 하게 작성되었습니다.

radio와 같은 방법으로 동일한 id, class등은 하나씩 번갈아 가며 주석처리해서 테스트하면 됩니다.

    //id로 값 설정

    $('#chk_id1').prop('checked', true);

    $('#chk_id1').prop('checked', false);

    document.getElementById('chk_id2').checked = true;

    document.getElementById('chk_id2').checked = false;

    //class 로 값 설정

    $('.chk_class3').prop('checked', true);

    $('.chk_class3').prop('checked', false);

    //name으로 값 설정

    $("input[name=chk_name3]").prop("checked",true);

    $("input[name=chk_name3]").prop("checked",false);

대충 구현한 웹 모양입니다.

- 전체 소스

소스가 길어 가독성이 떨어지는 버튼관련 소스는 생략했습니다.

필요하면 이전 글에 있는 소스를 복사하거나 참조하여 테스트 하면 됩니다.

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>form value</title>

  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>

</head>

<body>

<table>

    <tr>

        <td>Input </td>

        <td><input type="text" id="input_id" class="input_class" name="input_name"></td>

    </tr>

    <tr>

        <td>Textarea </td>

        <td><textarea id="textarea_id" class="textarea_class" name="textarea_name"></textarea></td>

    </tr>

    <tr>

        <td>Select</td>

        <td>

            <select id="sel_id" class="sel_class" name="sel_name">

              <option value="s1">select1</option>

              <option value="s2">select2</option>

              <option value="s3">select3</option>

            </select>

        </td>

    </tr>

    <tr>

        <td>Radio</td>

        <td>

            <input type="radio" name="ra_name" class="ra_class1" id="ra_id1" value="radio1"> radiooo

            <input type="radio" name="ra_name" class="ra_class2" id="ra_id2" value="radio2"> radiiii

            <input type="radio" name="ra_name" class="ra_class3" id="ra_id3" value="radio3"> raddddd

        </td>

    </tr>

    <tr>

        <td>Checkbox</td>

        <td>

            <input type="checkbox" name="chk_name1" id="chk_id1" class="chk_class1" value="chk01">Check01

            <input type="checkbox" name="chk_name2" id="chk_id2" class="chk_class2" value="chk02">Check02

            <input type="checkbox" name="chk_name3" id="chk_id3" class="chk_class3" value="chk03">Check03

        </td>

    </tr>

    <tr>

        <td></td>

        <td></td>

    </tr>

    <tr>

        <td></td>

        <td><button onclick="btnClick();"> button </button></td>

    </tr>

<script>

$( document ).ready(function() {

    //--Input

    //id 로 값 설정

    $("#input_id").val("set input Value by id");

    //class 로 값 설정

    $(".input_class").val("set input Value by class");

    //name으로 값 설정

    $('input[name="input_name"]').val("set input Value by name");

    //--Textarea

    //id 로 값 설정

    $('#textarea_id').val("set textarea Value by id");

    //class 로 값 설정

    $('.textarea_class').val("set textarea Value by class");

    //name으로 값 설정

    $('textarea[name=textarea_name]').val("set textarea Value by name");

    //--Select by value

    //id 로 값 설정

    $('#sel_id').val("s2");

    //class 로 값 설정

    $('.sel_class').val("s3");

    //name으로 값 설정

    $("select[name='sel_name']").val("s1");

    //--Select by text

    //id 로 값 설정

    $("#sel_id option:selected").text("select2");

    //class 로 값 설정

    $(".sel_class option:selected").text("select3");

    //name으로 값 설정

    $("select[name='sel_name'] option:selected").text("select1");

    //--Select by index 로 값 설정

    document.getElementById("sel_id").options.selectedIndex = 1;

    //--Radio

    //id 로 값 설정

    $('#ra_id1').attr('checked', true);

    $('#ra_id1').attr('checked', false);

    $("#ra_id1").prop("checked", true);

    $("#ra_id1").prop("checked", false);

    //class 로 값 설정

    $('.ra_class2').attr('checked', true);

    $('.ra_class2').attr('checked', false);

    //name으로 값 설정

    $('input:radio[name=ra_name][value=radio1]').attr('checked', true);

    $('input:radio[name="ra_name"][value="radio2"]').prop('checked', true);

    var radValue = "radio3";

    $('input:radio[name="ra_name"][value='+radValue+']').prop('checked', true);

    //--Checkbox

    //id로 값 설정

    $('#chk_id1').prop('checked', true);

    $('#chk_id1').prop('checked', false);

    document.getElementById('chk_id2').checked = true;

    // document.getElementById('chk_id2').checked = false;

    //class 로 값 설정

    $('.chk_class3').prop('checked', true);

    // $('.chk_class3').prop('checked', false);

    //name으로 값 설정

    $("input[name=chk_name3]").prop("checked",true);

    // $("input[name=chk_name3]").prop("checked",false);

});

</script>

 </body>

</html>

- copy coding -

이번 프로젝트는 화면을 JSP로 구현하는 사이트에서 일을 하게 되었습니다.  form:form tag도 있지만 예전 방식을 사용하는 곳이라 값을 가져오는 방법에 대해서 정리를 해보았습니다.  tag들이 여러 개지만 가장 많이 사용하는 것을 기존으로 정리해봅니다.

value 또는 text를 가져오는 방법과 id, class, name으로 가져오는 방법을 정리했습니다.

설명은 필요 없을 듯 하여 그냥 소스와 결과만 기록 합니다.

예제로 사용한 form 태그의 모습입니다.

1. input tag

- input 사용 방법

<input type="text" id="input_id" class="input_class" name="input_name">

- input value 가져오기

    //id 로 값 가져오기

    var inputId = $('#input_id').val();

    //class 로 값 가져오기

    var inputClass = $('.input_class').val();

    //name으로 값 가져오기

    var inputName = $('input[name=input_name]').val();

- input 결과

input val : ss12/ss12/ss12

2. textarea

- textarea 사용 방법

<textarea id="textarea_id" class="textarea_class" name="textarea_name"></textarea>

- textarea value 가져오기

    //id 로 값 가져오기

    var textareaId = $('#textarea_id').val();

    //class 로 값 가져오기

    var textareaClass = $('.textarea_class').val();

    //name으로 값 가져오기

    var textareaName = $('textarea[name=textarea_name]').val();

- textarea 결과

textarea val : text0

area0/text0

area0/text0

area0

3. select

- select 사용 방법

            <select id="sel_id" class="sel_class" name="sel_name">

              <option value="s1">select1</option>

              <option value="s2">select2</option>

              <option value="s3">select3</option>

            </select>

- select value 가져오기

    //id 로 값 가져오기

    var selectId = $('#sel_id').val();

    //class 로 값 가져오기

    var selectClass = $('.sel_class').val();

    //name으로 값 가져오기

    var selectName = $("select[name='sel_name']").val();

- select text 가져오기

    //id 로 값 가져오기

    var selIdTxt = $("#sel_id option:selected").text();

    //class 로 값 가져오기

    var selTxt = $(".sel_class option:selected").text();

    //name으로 값 가져오기

    var selNameTxt = $("select[name='sel_name'] option:selected").text();

Select value : s2/s2/s2

Select text : select2/select2/select2

4. radio

- radio 사용 방법

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio1"> radiooo

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio2"> radiiii

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio3"> raddddd

- radio value 가져오기

    //id 로 값 가져오기

    var radioId = $("#ra_id:checked").val();

    //class 로 값 가져오기

    var radioClass = $('.ra_class:checked').val();

    //name으로 값 가져오기

    var radioName = $("input[name='ra_name']:checked").val()

- radio 결과

Radio value : radio2/radio2/radio2

5. checkbox

- checkbox 사용 방법

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk01">Check01

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk02">Check02

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk03">Check03

- checkbox value 가져오기

두가지 방법

    var value_Store = [];

    $.each($("input[name='chk_name']:checked"), function() {

      value_Store.push($(this).val());

    });

    console.log("Checkbox value : " + value_Store.join(", "));

    value_list = []

    $("input[name='chk_name']:checked").each(function(){

        var checked_value = $(this).val();

        value_list.push(checked_value)

    });

- checkbox 결과

Checkbox value : chk01, chk03

Checkbox value : chk01,chk03

web 화면과 console 결과화면 입니다.

전체 소스

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>form value</title>

  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>

</head>

<body>

<table>

    <tr>

        <td>Input </td>

        <td><input type="text" id="input_id" class="input_class" name="input_name"></td>

    </tr>

    <tr>

        <td>Textarea </td>

        <td><textarea id="textarea_id" class="textarea_class" name="textarea_name"></textarea></td>

    </tr>

    <tr>

        <td>Select</td>

        <td>

            <select id="sel_id" class="sel_class" name="sel_name">

              <option value="s1">select1</option>

              <option value="s2">select2</option>

              <option value="s3">select3</option>

            </select>

        </td>

    </tr>

    <tr>

        <td>Radio</td>

        <td>

            <input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio1"> radiooo

            <input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio2"> radiiii

            <input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio3"> raddddd

        </td>

    </tr>

    <tr>

        <td>Checkbox</td>

        <td>

            <input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk01">Check01

            <input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk02">Check02

            <input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk03">Check03

        </td>

    </tr>

    <tr>

        <td></td>

        <td></td>

    </tr>

    <tr>

        <td></td>

        <td><button onclick="btnClick();"> button </button></td>

    </tr>

<script>

function btnClick() {

    //id 로 값 가져오기

    var inputId = $('#input_id').val();

    //class 로 값 가져오기

    var inputClass = $('.input_class').val();

    //name으로 값 가져오기

    var inputName = $('input[name=input_name]').val();

    console.log("input val : " + inputId +"/"+ inputClass +"/"+ inputName);

    //id 로 값 가져오기

    var textareaId = $('#textarea_id').val();

    //class 로 값 가져오기

    var textareaClass = $('.textarea_class').val();

    //name으로 값 가져오기

    var textareaName = $('textarea[name=textarea_name]').val();

    console.log("textarea val : " + textareaId +"/"+ textareaClass +"/"+ textareaName);

    //id 로 값 가져오기

    var selectId = $('#sel_id').val();

    //class 로 값 가져오기

    var selectClass = $('.sel_class').val();

    //name으로 값 가져오기

    var selectName = $("select[name='sel_name']").val();

    console.log("Select value : " + selectId +"/"+ selectClass +"/"+ selectName);

    //text값 가져오기

    //id 로 값 가져오기

    var selIdTxt = $("#sel_id option:selected").text();

    //class 로 값 가져오기

    var selTxt = $(".sel_class option:selected").text();

    //name으로 값 가져오기

    var selNameTxt = $("select[name='sel_name'] option:selected").text();

    console.log("Select text : " + selTxt +"/"+ selIdTxt +"/"+ selNameTxt);

    //id 로 값 가져오기

    var radioId = $("#ra_id:checked").val();

    //class 로 값 가져오기

    var radioClass = $('.ra_class:checked').val();

    //name으로 값 가져오기

    var radioName = $("input[name='ra_name']:checked").val()

    console.log("Radio value : " + radioId +"/"+ radioClass +"/"+ radioName);

    // checkbox

    var value_Store = [];

    $.each($("input[name='chk_name']:checked"), function() {

      value_Store.push($(this).val());

    });

    console.log("Checkbox value : " + value_Store.join(", "));

    value_list = []

     $("input[name='chk_name']:checked").each(function(){

        var checked_value = $(this).val();

        value_list.push(checked_value)

    });

    console.log("Checkbox value : " + value_list);

}

</script>

</body>

</html>

- copy coding -

jquery validation 라이브러리를 사용하여 form에 입력하는 값에 대한 유효성을 검사할 수 있습니다.  사용방법도 매우 간단하여 rules과 messages만 설정해 주면 쉽게 적용이 가능 합니다

maven을 이용하지 않거나 추가적인 정보는 제작 사이트에 방문해서 자료를  찾을 수 있습니다.

https://jqueryvalidation.org/

pom.xml에 다음을 추가 합니다.

추가한 라이브러리는 Maven > Update Project를 해서 반영해 줍니다.

jQuery Validation의 구조는 매우 간단 합니다.

이렇게 rules, messages로 구성이 되어 있습니다.

rules를 이용하는 방법은 input 항목의 name 속성 값을 이용하여 설정을 진행하며

messages를 이용하는 방법도 input 항목의 name 속성 값을 이용하여 설정을 진행하며

이렇게 rules, messages가 쌍으로 구성되어 있습니다.  물론 messages를 작성하지 않아도 되는데 단점은 유효성 검사 결과를 영문으로 보여주기 때문에 영문으로 하지 않으려면 한글로 messages를 입력 해줘야 합니다.

적용 예)

이제 실제 적용을 하려는 화면 쪽 설정을 알아 봅니다.

먼저 maven에 추가한 라이브러리를 추가해 주고

form에 대한 유효성 설정을 진행 합니다.

Controller는 화면을 불러오도록 메소드를 하나 만들어 주고

프로젝트를 실행을 해서 페이지를 불러옵니다.

이제 등록 버튼을 클릭해서 무슨 일이 벌어지는지 확인해 봅니다.

이렇게 입력 항목에 대한 검사를 해줍니다.

개인적인 생각은 그냥 사용 하기에는 쓸만 하겠지만 요청사항이 까다로운 사이트에서는 사용이 힘들지 않을까 생각 됩니다.

- copy coding -

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

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

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 -