분류 전체보기
-
02 템플릿기반 폼(Template-driven Forms) 06앵귤러/04 폼(Forms) 2017. 9. 3. 13:30
ngSubmit으로 폼 제출폼을 작성한 후에 폼을 제출할 수 있어야합니다. 폼 하단의 Submit 버튼은 아무것도 하지 않지만 유형 (type = "submit")으로 인해 폼 제출을 트리거합니다."폼 제출"은 현재 쓸모가 없습니다. 유용하게 사용하려면 폼의 ngSubmit 이벤트 프로퍼티를 영웅 폼 컴포넌트의 onSubmit()메서드에 바인딩합니다. src/app/hero-form.component.html (ngSubmit) 당신은 이미 템플릿 참조변수인 #heroForm을 정의하고 값을 "ngForm"으로 초기화했습니다. 이제 이 변수를 사용하여 제출 버튼으로 폼에 액세스합니다.heroForm 변수를 통해 폼의 전체 유효성을 이벤트바인딩을 사용하여 버튼의 disabled 프로퍼티에 바인딩합니다. 코..
-
02 템플릿기반 폼(Template-driven Forms) 05앵귤러/04 폼(Forms) 2017. 9. 3. 13:28
시각적 피드백을위한 맞춤 CSS 추가입력란 왼쪽의 색상막대를 사용하여 필수입력란과 잘못된 데이터를 동시에 표시할 수 있습니다. 이러한 클래스 정의를 프로젝트에 추가한 새 forms.css 파일을 index.html파일이 있는 폴더에 추가하여 이 효과를 얻을 수 있습니다. src/forms.css .ng-valid[required], .ng-valid.required { border-left: 5px solid #42A948; /* green */ } .ng-invalid:not(form) { border-left: 5px solid #a94442; /* red */ } 이 스타일시트를 포함하도록 index.html의 를 수정하십시오. src/index.html (styles) 유효성 검사 오류 메시지 표..
-
02 템플릿기반 폼(Template-driven Forms) 04앵귤러/04 폼(Forms) 2017. 9. 3. 13:20
ngModel을 사용한 양방향 데이터 바인딩지금 바로 앱을 실행하면 조금 실망할 것입니다. Hero를 바인딩하지 않았기 때문에 영웅 데이터가 표시되지 않습니다. 이전 페이지에서 표시하는 법을 배웠습니다. 데이터표시 섹션에서 프로퍼티 바인딩을 배웠습니다. 사용자입력 섹션에서 이벤트바인딩을 사용하여 DOM 이벤트를 수신하는 방법과 표시된 값으로 컴포넌트 프로퍼티를 업데이트하는 방법을 배웠습니다.이제는 동시에 표시하고 듣고 추출해야합니다.이미 알고있는 기술을 사용할 수 있지만 새구문[(ngModel)]을 사용하면 폼을 모델에 쉽게 바인딩 할 수 있습니다.Name의 태그를 찾아 다음과 같이 수정하십시오. src/app/hero-form.component.html (excerpt) TODO: remove this..
-
02 템플릿기반 폼(Template-driven Forms) 03앵귤러/04 폼(Forms) 2017. 9. 3. 13:15
app.component.ts 수정AppComponent는 응용프로그램의 루트 컴포넌트입니다. 이것은 새로운 HeroFormComponent를 호스팅합니다."QuickStart"버전의 내용을 다음으로 교체하십시오: src/app/app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '' }) export class AppComponent { } 두 가지 변경사항이 있습니다. 템플릿은 단순히 컴포넌트의 selector 프로퍼티로 식별되는 새 엘리먼트 태그입니다. 응용프로그램 컴포넌트가 로드될 때 영웅 폼이 표시됩니다. 또한 클래스본문에 name 필드를 넣었습니다. 초기 HTML..
-
02 템플릿기반 폼(Template-driven Forms) 02앵귤러/04 폼(Forms) 2017. 9. 3. 13:11
설정설정 지침에 따라 angular-forms라는 새 프로젝트를 만듭니다. ng new angular-forms 영웅 모델 클래스 만들기사용자가 폼데이터를 입력하면 변경 사항을 캡처하고 모델 인스턴스를 업데이트합니다. 모델이 어떻게 보여야 하는지 알때까지 폼을 배치 할 수 없습니다.모델은 응용프로그램의 중요성에 대한 사실을 담고있는 "프로퍼티 가방"처럼 간단할 수 있습니다. 다음 모델은 Hero 클래스가 세 가지 필수필드(id, name, power)와 하나의 선택필드(alterEgo)를 가지고 있음을 설명합니다.app디렉토리에 다음의 주어진 내용으로 파일을 만듭니다. src/app/hero.ts export class Hero { constructor( public id: number, public n..
-
02 템플릿 기반 폼(Template-driven Forms) 01앵귤러/04 폼(Forms) 2017. 9. 3. 13:09
템플릿 기반 폼폼폼은 비즈니스 애플리케이션의 주류입니다. 폼을 사용하여 로그인하고, 도움요청을 제출하고, 주문하고, 항공편을 예약하고, 회의를 예약하고, 수많은 데이터 입력작업을 수행합니다.폼을 개발할 때 작업흐름을 통해 효율적이고 효과적으로 사용자에게 안내하는 데이터 입력 환경을 만드는 것이 중요합니다.폼을 개발하려면 양방향 데이터바인딩, 변경 추적, 유효성 검사 및 오류 처리에 대한 프레임워크 지원지원 뿐만 아니라 디자인 기술이 필요합니다.이 페이지는 간단한 폼을 만드는 방법을 보여줍니다. 만드는 과정에 다음과 같은 방법을 배우게됩니다.l 컴포넌트와 템플릿을 사용하여 Angular 폼을 작성l ngModel을 사용하여 입력 제어 값을 읽고 쓰는 양방향 데이터 바인딩을 생성l 상태 변경 사항 및 폼 컨..
-
01 사용자입력 03앵귤러/04 폼(Forms) 2017. 9. 3. 13:04
모두 한데 모아이전 페이지에서는 데이터를 표시하는 방법을 보여주었습니다. 이 페이지에서는 이벤트 바인딩기술을 설명했습니다.이제 영웅의 목록을 표시하고 새로운 영웅을 목록에 추가할 수 있는 마이크로 응용프로그램에 모두 넣으십시오. 사용자는 입력박스에 영웅의 이름을 입력하고 추가를 클릭하여 영웅을 추가할 수 있습니다. 아래는 "소규모 영웅 여행" 컴포넌트입니다. src/app/little-tour.component.ts @Component({ selector: 'little-tour', template: ` Add {{hero}} ` }) export class LittleTourComponent { heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; ad..
-
01 사용자 입력 02앵귤러/04 폼(Forms) 2017. 9. 3. 13:03
템플릿 참조변수에서 사용자 입력 받기사용자 데이터를 가져오는 또 다른 방법은 Angular 템플릿 참조변수를 사용하는 것입니다. 이러한 변수는 템플릿내에서 엘리먼트에 직접 액세스할 수 있게 해줍니다. 템플릿 참조변수를 선언하려면 식별자 앞에 해시문자(#)를 붙이십시오.다음 예제에서는 템플릿 참조변수를 사용하여 간단한 템플릿에서 키입력 루프백을 구현합니다. src/app/loop-back.component.ts @Component({ selector: 'loop-back', template: ` {{box.value}} ` }) export class LoopbackComponent { } 요소에 선언된 box라는 템플릿 참조변수는 엘리먼트 자체를 참조합니다. 이 코드는 box 변수를 사용하여 입력 엘리먼..