폼 (5) 썸네일형 리스트형 스프링 부트 폼 스프링 부트에서 폼을 통해 데이터를 전송하는 방법과 제약조건을 설정하는 방법을 살펴보겠습니다. HTML 삽입 미리보기할 수 없는 소스 공용 컴포넌트 - 리액티브 폼 인풋 컴포넌트의 재 상용성은 앵귤러나 리액트 등 프레임워크가 제공하는 장점 중 하나로 같은 코드를 중복작성할 필요성을 줄여줍니다. 오늘은 앵귤러에서 공용 인풋 컴포넌트를 만들어 보겠습니다. 구현하기 모듈추가 리액티브 폼즈 모듈을 모듈클래스에 추가합니다 컴포넌트 생성 공용으로 상용할 컴포넌트를 생성합니다 ng g c components/shared/input 생성한 컴포넌트 클래스 파일에 폼 컨트롤과 돔요소를 연결하는 인터페이스를 구현합니다 import { ControlValueAccessor } from '@angular/forms'; 구현된 메서드는 사용하지 않음으로 아래와 같이 정리 후 필요한 코드를 추가합니다. 인풋의 타입과 레이블은 인풋마다 다르므로 @Input을 통해 필드로 설정하여 변경 가능하도록 .. 앵귤러 폼 - 리액티브 폼 앵귤러 리액티브 폼은 옵저버블을 활용하여 폼에 입력되는 값을 스트림의 형태로 관리하며, 새로운 값이 입력될 때마다 이를 감지하고 반영합니다. 템플릿 드리븐 폼과 차이점은 리액티브 폼은 저장된 데이터를 동기식으로 처리하고 원본데이터에 대한 변형이 불가하며 옵저버블의 오퍼레이터를 통해서만 가능합니다. 앵귤러 리액티브 폼을 사용하는 방법을 보겠습니다. HTML 삽입 미리보기할 수 없는 소스 앵귤러 폼 - 템플릿 드리븐 폼 앵귤러 template-driven form을 설정하는 방법을 보겠습니다. 먼저, 폼을 사용하기 위해서는 앵귤러 폼 라이브러리에서 forms 모듈을 가져와야 합니다. //scr/app/app.module.ts import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ A.. 앵귤러 라이브러리 - Angular Forms 폼은 많은 애플리케이션에서 사용되는 기능 중 하나이죠. 앵귤러 폼 라이브러리 사용 시 validation 등 다양한 기능을 사용할 수 있는데요. 앵귤러 폼 라이브러리에서 제공하는 폼은 크게 'reactive'와 'template-driven' 방식으로 나누어집니다. 차이점 reactive 폼은 컴포넌트에서 폼객체 생성, 설정 (제약조건 포함) 하고 이를 템플릿에서 binding의 형식으로 사용하기 때문에 확장성이 높고 보안성이 뛰어난 장점이 있습니다. 반면, template-driven 폼은 템플릿에서 폼객체 생성, 설정 (제약조건 포함)을 하기 때문에 가시성이 좋으나 확장성은 떨어집니다. reactive template-driven Setup of form model Explicit, created i.. 이전 1 다음
