소개

Angular6 + bootstrap4로 전면 개발 중.
평소에는 가능한 한 템플릿 구동 폼으로 개발하고 있습니다.

이번, 셀렉트 박스로 복수 선택 가능의 굉장히 외형으로 하고 싶고, @ng-select/ng-select@ng-select/ng-select 의 상세한 사용법은 이쪽 를 참조.

※전혀 다른 패키지로 ng-select 라는 이름의 것도 있으므로 조심해 주세요!

텍스트 영역

평상시는 이런 느낌으로, required 라고 하는 Angular의 표준 밸리데이션 체크 기능을 이용하고 있습니다.
오류시 메시지는 bootstrap invalid-feedback 디자인을 적용하여 표시됩니다.

textarea.component.html

<div class="form-group row">
  <label class="col-sm-3 col-form-label" for="userEmail">ユーザメールアドレス</label>
  <div class="col-sm-9">
    <input type="text" class="form-control" name="userEmail" [(ngModel)]="user.user_email" #userEmail="ngModel"
      [ngClass]="{ 'is-invalid': f.submitted && userEmail.invalid }" required email/>
    <div *ngIf="f.submitted && userEmail.invalid" class="invalid-feedback">
      <div *ngIf="userEmail.errors.required">この項目は必須です。</div>
      <div *ngIf="userEmail.errors.email">メールアドレスの形式で入力してください。</div>
    </div>
  </div>
</div>

ng-select를 적용한 선택 상자

앞에서 언급했듯이 @ng-select/ng-select를 사용하여 선택 상자의 기능 및 외형을 확장하고 있지만 텍스트 영역의 유효성 검사와 마찬가지로 할 수 있다고 생각하면 의외로 빠졌습니다. .

우선 완성형입니다.

selectbox.component.html

<div class="form-group row">
  <label class="col-sm-3 col-form-label" for="account">アカウント選択</label>
  <div class="col-sm-9">
    <ng-select [items]="accounts | async" name="account" bindLabel="name" autofocus bindValue="id"
      [(ngModel)]="user.account_id" required #account="ngModel" (change)="changeAccount($event)"></ng-select>
    <div *ngIf="f.submitted && account.invalid" class="invalid-feedback d-block">
      この項目は必須です。
    </div>
  </div>
</div>

selectbox.component.ts

accounts: Promise<any>;    // ほんとはanyダメよ
public ngOnInit() {
    this.accounts = this.accountService.getData();
}

주의점 1

・도입시의 빠짐 포인트!
이것은 어디까지나 나의 환경만의 가능성도 있으므로, 적절히 읽어 주세요.

angular.json에 CSS 경로를 기재해도 적용되지 않음

→ 공식적으로 할 수 있다고 쓰는데 할 수 없었습니다. .
결국 공식 발표대로 styles.scss에 import 문장을 쓰면 무사히 적용되었습니다.

module.ts를 분할하면 적용 범위를 이해하기 어렵습니다

여기는 ng-select를 적용하고 싶은 component의 直近のmodule.ts에 ng-select를 import하지 않으면 오류가 발생했습니다.

주의점 2

・밸리데이션 체크시의 css를 추기할 필요가 있다!
공식적으로 발표가 있었는데, 내가 읽고 날고 있었다. .

styles.scss

ng-select.ng-invalid.ng-touched .ng-select-container {
    border-color: #dc3545;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px #fde6e8;
}

기본적으로 ng-select에서도 required 등의 검증 체크 파라미터는 유효합니다.
그러나 밸리데이션 체크에 걸렸을 때에 부여되는 클래스가, ng-invalid 라고 하는 클래스로 바뀌므로 거기가 주의 포인트입니다.
물론 bootstrap의 표준이 아니므로 스스로 추가해야합니다.

주의점 3

・ invalid-feedback 가 효과가 없다!
주의 2의 밸리데이션 체크시의 클래스명이 바뀌는 것을 알고 있으면 곧 해결할 수 있었습니다만, 빠져 버렸습니다. .
bootstrap4 에 따르면 invalid-feedback 는 .is-invalid 또는 .is-valid 에 반응하여 스타일을 적용/하지 않는 것을 제어하는 ​​것 같습니다.

ng-select는 대상이되는 선택 상자의 객체에 대해 Angular의 invalid 매개 변수는 부여하지만 bootstrap의 .is-invalid는 부여하지 않는 것 같습니다.

그러나 선택 상자의 오류 메시지 만 css 쓰는 것은하고 싶지 않기 때문에 조사하고 있으면 .d-block라는 것을 발견했습니다.
이것은, 강제적으로 invalid-feedback 를 유효화해 주는 클래스답게, 이 녀석을 사용하는 것으로,
div 요소의 출입은 평소와 같이 Angular의 ngIf 지시어에 맡기고, 에러 메세지의 적용은 bootstrap라고 하는 형태가 생겼습니다.

해당 위치.html

<div *ngIf="f.submitted && account.invalid" class="invalid-feedback d-block">
  この項目は必須です。
</div>

사이고에게

셀렉트 박스를 고집한 별로, @ng-select/ng-select 와 싸웠다는 이야기였습니다.
써드파티제의 폼계 패키지를 사용할 때는, 여러가지와 배팅하는 것을 생각해 기술 선택하지 않으면이라고, 반성했습니다.