Angular의 라디오 버튼

1. Angular의 라디오 버튼
2. Angular에서 라디오 버튼 바인딩

Angular에서 라디오 버튼을 추가하고 라디오 버튼을 바인딩하고 유효성을 검사하는 방법을 예제와 함께 소개합니다.

Angular의 라디오 버튼

우리는 Angular에서 UI/UX를 만들기 위해 Angular Material 라이브러리를 사용했습니다. Angular 재료는 우리 프로젝트에 많은 내장 모듈을 제공합니다.

자동 완성, 날짜 선택기, 슬라이더, 메뉴, 그리드, 도구 모음 및 라디오 버튼과 같은 구성 요소는 일반적으로 Angular Material을 사용하여 사용됩니다.

Angular에서 HTML5를 사용하여 라디오 버튼 만들기

라디오 버튼은 type 속성이 radio로 설정된 간단한 입력 요소입니다. 라디오 버튼의 구문은 다음과 같습니다.

# Angular
<input id="radio" type="radio" value="1">
<label for="radio">My Radio</label>

출력:

이름 없이는 요소를 식별할 수 없기 때문에 모든 HTML 입력 요소의 이름을 지정해야 합니다. 라디오 버튼이 선택된 경우 값을 설정하고 이 값을 서버로 보내려고 합니다.

아래에 표시된 예를 들어 이에 대해 논의해 보겠습니다.

# Angular
<input type="radio" name="fruits" value="Apple">

name 속성은 전체 라디오 개체 그룹을 설정하는 데 사용됩니다. 단일 라디오 버튼은 의미가 없습니다.

라디오 버튼 그룹이 필요합니다. 단일 항목에 대해 확인란을 사용할 수 있지만 단일 항목으로 사용될 때 라디오 버튼은 의미가 없습니다.

Angular의 라디오 버튼에 대한 중요 사항

1. 라디오 버튼은 그룹으로 나타납니다. 그룹에 넣을 때만 의미가 있습니다.
2. 하나의 요소를 선택할 수 있고 하나의 라디오 버튼으로 다른 요소를 선택 해제할 수 있습니다.
3. 각 라디오 버튼의 id는 특별합니다. 페이지에서 사용되는 각 라디오 버튼에 대해 고유한 ID가 있어야 합니다.
4. 라디오 요소에는 name 속성도 있습니다. name 속성은 전체 라디오 개체 그룹을 설정할 수 있습니다.
5. 그룹의 라디오 버튼은 이름이 같습니다. HTML은 name 속성을 사용하여 이 라디오 버튼이 속한 그룹을 파악하여 그룹에서 하나의 버튼만 선택되도록 하기 때문입니다.

Angular에서 라디오 버튼 바인딩

<mat-radio-button>은 기본 <input type="radio"> 증가와 머티리얼 디자인 스타일 및 애니메이션과 동일한 기능을 제공합니다. 라디오 버튼에서 사용자는 한 번에 하나의 값만 선택할 수 있습니다.

그렇기 때문에 같은 이름의 라디오 버튼에는 세트가 포함되며 한 번에 하나만 선택할 수 있습니다.

radio-button 레이블은 <mat-radio- button> 요소를 충족하기 위해 제공됩니다. 레이블 위치 속성을 앞이나 뒤에 설정하여 라디오 버튼 앞이나 뒤에 레이블을 배치할 수 있습니다.

라디오 버튼 옆에 레이블이 표시될 필요가 없으면 aria-label 또는 aria-labelledby를 사용하여 해당 레이블을 지정할 수 있습니다.

라디오 버튼은 DOM 네트워크에서 불가능하지 않는 한 일반적으로 <mat-radio-group> 안에 배치됩니다. 라디오 그룹은 그룹 내에서 현재 선택된 라디오 버튼을 기억하는 귀중한 속성을 가지고 있습니다.

라디오 그룹 내의 고유한 라디오 버튼은 이 그룹의 이름을 상속합니다.

<mat-radio-group>은 @angular/forms에 적합하며 Forms 및 Reactive Forms 모듈을 모두 포함합니다.

이제 Angular 프로젝트를 만들고 Angular 재질 라이브러리를 설치합니다. 최신 Angular CLI가 있습니다.

다음은 Angular 프로젝트를 만드는 데 사용할 명령입니다.

# Angular
ng new project

이 명령을 사용하여 hammer.js를 설치합니다.

# Angular
npm install --save hammerjs

이제 아래 명령을 사용하여 Angular 재료를 설치할 수 있습니다.

# Angular
npm install --save @angular/material

이제 아래 명령을 사용하여 Angular 애니메이션을 설치할 수 있습니다.

# angular
npm install --save @angular/animations

아래 표시된 명령을 사용하여 Angular CDK를 설치할 수 있습니다.

# angular
npm install --save @angular/cdk

angular.json 파일 안에 hammerjs를 포함할 수 있습니다. 프로젝트의 루트에서 파일을 찾을 수 있습니다.

# Angular
"scripts": [
     "./node_modules/hammerjs/hammer.min.js"
]

이제 라디오 버튼 그룹을 만들고 선택한 라디오 버튼의 값을 가져오도록 합시다. 먼저 아래와 같이 app.module.ts 내부에 FormsModule 및 ReactiveFormsModule을 가져옵니다.

# angular
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

이제 아래와 같이 app.component.html 파일에 프런트엔드를 생성합니다.

# angular
<div *ngFor="let fruit of fruits">
      <label for="{{fruit}}">
        <input id="{{fruit}}" [value]='fruit' type="radio" name="fruits" [(ngModel)]="favFruit">
        {{fruit}}
      </label>
</div>
<button (click)='radioFun'>Submit</button>

<div>
  <p>The selected Fruit is <b>{{favFruit}}</b></p>
</div>

출력:

이제 라디오 버튼을 바인딩하여 선택한 라디오 버튼을 표시합니다. app.component.ts 파일을 편집하고 업데이트된 코드는 아래와 같습니다.

# angular
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  favFruit: string;
  fruits: string[] = ["Banana", "Apple", "Guava", "Strawberry"];

  radioFun(){
    return console.log(this.favFruit);
  }
}

출력: