지금까지 모든 유형의 응용 프로그램을 작성했다면 확인란이 갖는 큰 중요성을 이미 알고 있습니다. 모든 플랫폼에서 데이터를 더 쉽게 입력 할 수있을뿐만 아니라 목록 기능과 함께 제공되는 경우가 많기 때문에 데이터를 빠르게 정렬 할 수도 있습니다. 이 기사에서는 다음 순서로 angular8에서 확인란을 만드는 방법을 살펴 봅니다.
Angular8에서 확인란 만들기
Angular8에서 체크 박스를 생성하는 단계를 설명하기 위해 선택할 주문 목록이있는 예를 들어 보겠습니다. 체크 박스 형식으로 사용자에게이를 전달해야합니다. 이를 위해 아래 코드를 따르십시오.
피보나치 시리즈 C ++
const ordersData = [{id : 1, name : 'order 1'}, {id : 2, name : 'order 2'}, {id : 3, name : 'order 3'}, {id : 4, name : '주문 4'}]이 경우 데이터가 이미 존재하므로 위에서 공유 한 코드를 사용했습니다. 실제 시나리오에서이 데이터는 API를 통해 가져올 가능성이 높습니다.
이 예에서는 반응 형을 사용하여 최종 결과를보다 깨끗하고 효율적으로 만들 수도 있습니다. 이를 수행하는 방법을 이해하려면 아래 예를 살펴보십시오.
import {Component} from '@ angular / core'import {FormBuilder, FormGroup} from '@ angular / forms'@Component ({selector : 'my-app', templateUrl : './app.component.html', styleUrls : [ './app.component.css']}) export class AppComponent {form : FormGroup ordersData = [] constructor (private formBuilder : FormBuilder) {this.form = this.formBuilder.group ({orders : []})} submit () {...}}위의 코드에서 우리는 다음을 사용했습니다.
- FormGroups : 단일 형태를 나타냅니다.
- FormControl : 단일 양식에 대한 단일 항목을 나타냅니다.
- FormArray : 모든 FormControl의 컬렉션을 나타내는 데 사용됩니다.
위의 예에서 FormBuilder 서비스를 사용하여 다음과 같은 양식을 만들 수도 있습니다.
제출
위의 예에서는 [formGroup] =”form”을 사용하여 폼 요소와 폼을 바인딩했습니다.
이제 기본 양식이 작성되었으므로 아래와 같이 FormArray를 사용하여 동일에 약간의 동성을 추가하겠습니다.
import {Component} from '@ angular / core'import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} from '@ angular / forms'@Component ({selector : 'my-app', templateUrl : './app.component .html ', styleUrls : ['./app.component.css ']}) export class AppComponent {form : FormGroup ordersData = [{id : 100, name :'order 1 '}, {id : 200, name :' order 2 '}, {id : 300, name :'order 3 '}, {id : 400, name :'order 4 '}] constructor (private formBuilder : FormBuilder) {this.form = this.formBuilder.group ({ orders : new FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if 첫 번째 항목을 true로 설정하고, 그렇지 않으면 false (this.form.controls.orders as FormArray) .push (control)})} submit () {const selectedOrderIds = this.form.value.orders .map ((v, i) = > v? this.orders [i] .id : null) .filter (v => v! == null) console.log (selectedOrderIds)}}위의 예에서 모든 루프 반복 후 새 FormControl을 만들고 FormArray에서 주문을 가져 왔습니다. 첫 번째 컨트롤을 true로 설정 했으므로 기본적으로 첫 번째 순서가 목록에서 선택되어 있습니다.
그런 다음 사용자에게 표시해야하는 특정 주문 정보를 가져 오기 위해 FormArray 요소를이 템플릿에 바인딩해야합니다.
{{ordersData [i] .name}} 제출산출:
Angular8에서 체크 박스 확인
확인란의 유효성을 검사하는 방법을 알아 보려면 아래 예를 살펴보세요.
{{ordersData [i] .name}} 적어도 하나의 주문을 선택해야합니다. 제출 ... 내보내기 클래스 AppComponent {양식 : FormGroup ordersData = [...] constructor (private formBuilder : FormBuilder) {this.form = this.formBuilder .group ({orders : new FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} function minSelectedCheckboxes (min = 1) {const validator : ValidatorFn = (formArray : FormArray) => { const totalSelected = formArray.controls // 체크 박스 값 목록 가져 오기 (boolean) .map (control => control.value) // 체크 된 체크 박스 수 합계 .reduce ((prev, next) => next? prev + next : prev, 0) // 합계가 최소값보다 크지 않으면 오류 메시지를 반환합니다. return totalSelected> = min? null : {필수 : true}} return validator}산출:
ASync 양식 컨트롤 추가
이제 동적 확인란을 추가하는 방법을 알았으므로 이러한 양식에 ASync를 추가하는 방법을 살펴 보겠습니다.
import {Component} from '@ angular / core'import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} from '@ angular / forms'import {of} from 'rxjs'@Component ({selector : 'my-app', templateUrl : './app.component.html', styleUrls : [ './app.component.css']}) export class AppComponent {form : FormGroup ordersData = [] constructor (private formBuilder : FormBuilder) {this.form = this.formBuilder.group ({orders : new FormArray ([], minSelectedCheckboxes (1))}) // 동기 주문 this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // 첫 번째 항목이 true로 설정되면 false (this.form.controls.orders as FormArray) .push (control)} )} getOrders () {return [{id : 100, name : 'order 1'}, {id : 200, name : 'order 2'}, {id : 300, name : 'order 3'}, {id : 400, 이름 : '주문 4'}]} submit () {const selectedOrderIds = this.form.value.orders .map ((v, i) => v? this.ordersData [i] .id : null) .filter (v => v! == null) console.log (selectedOrderIds)}} ... import {of} from 'rxjs'... constructor (private formBuilder : FormBuilder) {this.form = this. formBuilder.group ({orders : new FormArray ([], minSelectedCheckboxes (1))}) // 비동기 주문 (http 서비스 호출 일 수 있음) of (this.getOrders ()). subscribe (orders => {this.ordersData = orders this.addCheckboxes ()}) // 동기 주문 // this.ordersData = this.getOrders () // this.addCheckboxes ()}이것으로 우리는 우리 기사의 끝까지 왔습니다. 이제 angular8에 체크 박스를 추가하는 방법을 알았으니, 일상적인 코딩에서이 체크 박스를 활용하시기 바랍니다.
패키지 생성 방법
이제 Angular의 구성 요소를 알았으니 에듀 레카. Angular는 확장 가능한 엔터프라이즈 및 성능 클라이언트 측 웹 애플리케이션을 만드는 데 사용되는 JavaScript 프레임 워크입니다. Angular 프레임 워크 채택률이 높아짐에 따라 애플리케이션의 성능 관리는 커뮤니티 주도로 간접적으로 더 나은 취업 기회를 창출합니다. Angular 인증 교육은 엔터프라이즈 애플리케이션 개발과 관련된 이러한 모든 새로운 개념을 다루는 것을 목표로합니다.