web-dev-qa-db-ja.com

Angular 2-カスタムフォームコントロール-無効

_input[type=text]_と日付ピッカーで構成されるControlValueAccessorを使用してカスタムコントロールを作成しました。

テンプレート駆動フォームで使用すると、すべてが正常に動作します。しかし、モデル駆動型のアプローチ（リアクティブフォーム）を使用する場合、フォームコントロールのdisable()メソッドは何の効果もないようです。

モデル駆動型フォームの他のすべてのフォームコントロールと同じように、プログラムでカスタムコントロールを無効/有効にすることはできますか？

[〜＃〜]編集[〜＃〜]

Angular v2.1.0を使用しており、ガイドとして使用しているため、私の方法論は this とほとんど同じです。

[〜＃〜]編集[〜＃〜]

これは私のカスタムコントロールです。

_@Component({
  selector: 'extended-datepicker',
  templateUrl: './extended-datepicker.component.html',
  styleUrls: ['./extended-datepicker.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ExtendedDatepickerComponent),
      multi: true
    }
  ]
})
export class ExtendedDatepickerComponent implements OnInit, ControlValueAccessor {
  isDatepickerActive: boolean = false;
  _selectedDate: Date;
  selectedDateString: string = "";
  @Input() disabled: boolean;
  @Input() mask: any;
  @Input() required: boolean;

  @ViewChild('textInput') textInput: ElementRef;

  get selectedDate(): Date {
    return this._selectedDate;
  }

  set selectedDate(value: Date) {
    this.selectedDateString = moment(value).format(STANDARD_DATE_FORMAT);
    this._selectedDate = value;
  }

  propagateChange: Function;

  @ViewChild(DatePickerComponent) datepicker: DatePickerComponent;

  constructor() {
  }

  writeValue(value: Date) {
    if (value) {
      this.selectedDate = value;
      this.selectedDateString = moment(value).format(STANDARD_DATE_FORMAT);
    }
  }

  registerOnTouched(): void {
  }

  registerOnChange(fn: Function) {
    this.propagateChange = fn;
  }
  // ...
_

これはコントロールのテンプレートです：

_<div class="calendar-wrapper row-small-margin" 
     (clickOutside)="isDatepickerActive = false;">

  <div class="col-xs-10 col-small-padding">
    <div class="input-group">

      <span class="input-group-addon" role="button" (click)="prevDay()" 
            *ngIf="selectedDate">
        <i class="fa fa-chevron-left"></i>
      </span>

      <input #textInput [textMask]="{mask: mask}" 
             [(ngModel)]="selectedDateString" 
             (ngModelChange)="inputChange()"
             class="form-control" [required]="required" 
             [disabled]="disabled" (keyup)="onKeyPressed($event)">

      <span class="input-group-addon" role="button" (click)="nextDay()" 
            *ngIf="selectedDate">
        <i class="fa fa-chevron-right"></i>
      </span>
    </div>

    <div *ngIf="isDatepickerActive" class="datepicker-wrapper">
      <datepicker [(ngModel)]="selectedDate" (ngModelChange)="dateChange()" 
                  [showWeeks]="false" [required]="required"
                  [formatDay]="dd" [formatMonth]="MM" [formatYear]="yyyy" 
                  [disabled]="disabled">
      </datepicker>
    </div>
  </div>

  <div class="col-xs-2 col-small-padding">
    <button class="btn btn-sm btn-datepicker" [disabled]="disabled"
        (click)="toggleDatePicker()" type="button">
      <img src="/assets/img/image.png">
    </button>
  </div>

</div>
_

そしてこれが私のフォームコンポーネントで行うことです：

_this.myForm.controls['pickDate'].valueChanges.subscribe(val => {
  if (!val) {
    this.myForm.controls['date'].disable(); // This line here does nothing
  }
});
_

私の拡張日付ピッカー内でそのdisable()呼び出しに応答し、それに応じて行動するにはどうすればよいですか？

javascriptformsangular
21
Siri0S

コンポーネントは、setDisabledStateインターフェイスで定義されているControlValueAccessor関数を実装する必要があります（ docs を参照）。

例えば。 （レンダラーがコンストラクターに挿入されていると想定）：

setDisabledState(isDisabled: boolean) {
    this.renderer.setElementProperty(this.textInput.nativeElement, 'disabled', isDisabled);
    // disable other components here
}
38
ripe_bananas