ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 04 리액티브 폼(Reactive Forms) 10
    앵귤러/04 폼(Forms) 2017. 10. 22. 21:12

    FormControl 프로퍼티 검사

    현재 전체 폼 모델을 페이지에 만들었습니다. 때때로 당신은 특정 FormControl의 상태에 관심이 있습니다.

    .get() 메소드를 사용하여 폼 내의 개별 FormControl을 추출하여 개별 FormControl을 조사할 수 있습니다. 컴포넌트 클래스 내에서 이 작업을 수행하거나 템플릿에 다음을 추가하여 페이지에 표시 할 수 있습니다. {{form.value | json}} 보간법은 다음과 같습니다:

    src/app/hero-detail.component.html

    <p>Name value: {{ heroForm.get('name').value }}</p>

    FormGroup안에 있는 FormControl의 상태를 가져 오려면 컨트롤에 점 표기법 경로를을 사용하여 지정합니다.

    src/app/hero-detail.component.html

    <p>Street value: {{ heroForm.get('address.street').value}}</p>

    이 기술을 사용하여 다음 중 하나와 같은 FormControl의 프로퍼티를 표시 할 수 있습니다.

    프로퍼티

    설명

    myControl.value

    FormControl의 값

    myControl.status

    FormControl의 유효성. 가능한 값: VALID, INVALID, PENDING, or DISABLED.

    myControl.pristine

    UI에서 사용자가 값을 변경하지 않은 경우 true, 반대는 myControl.dirty

    myControl.untouched

    사용자가 HTML 컨트롤에 아직 입력하지 않고 해당 블러이벤트를 트리거 한 경우 true입니다. 그 반대는 myControl.touched입니다.

    FormControl 속성에 대해 알아보려면 AbstractControl API 참조하세요.

    FormControl 속성을 검사하는 일반적인 이유중 하나는 사용자가 유효한 값을 입력했는지 확인하는 것입니다. 폼 유효성 검사 가이드에서 Angular 폼 유효성 검사에 대해 자세히 알아보십시오.

     

    데이터 모델과 폼 모델

    현재 폼에 빈 값이 표시됩니다. HeroDetailComponent는 영웅, 아마도 원격 서버에서 검색 한 영웅의 값을 표시해야 합니다.

    이 앱에서 HeroDetailComponent는 부모컴포넌트인 HeroListComponent 로부터 영웅을 얻습니다.

    서버의 hero는 데이터 모델입니다. FormControl 구조는 폼 모델입니다.

    컴포넌트는 데이터 모델의 영웅 값을 폼 모델에 복사해야 합니다. 두 가지 중요한 의미가 있습니다.

    1.      개발자는 데이터 모델의 프로퍼티가 폼 모델의 프로퍼티에 매핑되는 방식을 이해해야합니다.

    2.      사용자 변경은 DOM 엘리먼트에서 데이터 모델이 아닌 폼 모델로 흐릅니다. 폼 컨트롤은 결코 데이터 모델을 업데이트하지 않습니다.

    폼모델과 데이터모델 구조가 정확히 일치 할 필요는 없습니다. 특정 화면에 데이터 모델의 하위 집합을 제공하는 경우가 있습니다. 그러나 폼 모델의 모양이 데이터 모델의 모양에 가까워지면 작업이 더 쉬워집니다.

    여기 HeroDetailComponent에서는 두 모델이 아주 비슷합니다.

    data-model.ts에서 Hero의 정의를 상기 해보십시오.

    src/app/data-model.ts (classes)

    export class Hero {

      id = 0;

      name = '';

      addresses: Address[];

      }

     

      export class Address {

      street = '';

      city   = '';

      state  = '';

      zip    = '';

      }

    다음은 컴포넌트의 FormGroup 정의부분 입니다.

    src/app/hero-detail.component.ts (excerpt)

        this.heroForm = this.fb.group({

          name:['', Validators.required],

          address: this.fb.group({

            street:'',

            city:'',

            state:'',

            zip:''

            }),

            power:'',

            sidekick:''

        });

    이 두 모델 간에는 두 가지 중요한 차이점이 있습니다.

     

    1.      Hero id가 있습니다. 폼 모델은 일반적으로 사용자에게 기본키를 표시하지 않기 때문에 id가 없습니다.

    2.      Hero는 주소배열을 가지고 있습니다. 이 폼 모델은 하나의 주소 만 표시하며, 아래에서 다시 검토합니다.

    그럼에도 불구하고 두 모델은 모양이 매우 비슷하므로 데이터 모델 프로퍼티를 patchValue setValue 메서드를 사용하여 폼 모델에 쉽게 복사하는 방법을 잠깐 볼 수 있습니다.

    다음과 같이 간결하고 명료하게 하기위해 주소 FormGroup 정의를 리팩토링합니다.

    src/app/hero-detail-7.component.ts

        this.heroForm = this.fb.group({

          name:['', Validators.required],

          address: this.fb.group(new Address()),

            power:'',

            sidekick:''

        });

    또한 HeroAddress 클래스를 참조할 수 있도록 데이터 모델에서 임포트를 수정해야 합니다.

    src/app/hero-detail-7.component.ts

    import { states, Hero, Address } from './data-model';

     

    댓글

Designed by Tistory.