Angular2：当 jquery 插件附加到 ng-form 对象时如何触发 ng-valid？

Question

我使用 Angular2 ng-form，我喜欢它如何自动确定表单上的所有控件是否有效，如果有效，则启用我的表单提交按钮。但是，如果我在这些控件之一上使用一个很酷的 jquery 插件，例如我的示例中的 datedropper，那么在底层输入控件有效之前，表单将保持无效。

这是我的表格HTML:

    <form name="submitForm" #submitForm="ngForm">
      <div class="group">
        <input class="spring-date spring-input" data-large-mode="true" data-large-default="true" required readonly type="text" name="docdate" [(ngModel)]="docdate" #inputdocdate="ngModel">
      </div>
      <div class="group">
        <input class="spring-input" required type="text" name="company" [(ngModel)]="company" #inputcompany="ngModel">
      </div>
      <div class="group">
        <button id="btnSave" type="submit" class="btn btn-default" [disabled]="!submitForm.form.valid">SAVE</button>
      </div>
    </form>

这里 jquery 激活 datedropper（我在我的 TypeScript 组件中这样做）：

ngOnInit() {
        // Initialize Datedropper jquery select box
        $('.spring-date').dateDropper();
    });

即使我在 datedropper jquery 更改事件中更新我的 TS 代码中的 duo-binded docdate 值，表单也无法确定它是在我开始输入其他文本框控件之前有效。

$('.spring-date').on('change', (e: any) => {
            this.docdate = $(e.target).val();                
        });

如何使用 jquery 插件（如 datedropper 或 Select2）并在用户更改值后更新 jquery 中的基础输入控件并同时何时激活 Angular2 表单验证？

我唯一的其他选择是放弃内置的 Angular2 验证并编写代码以手动验证所有控件。我觉得我缺少一个简单的解决方法。

Answer 1

在你的情况下，在 angular 区域内调用 onChange 将帮助你：

$('.spring-date').dateDropper().on('change', (e: any) => {
   // console.log(Zone.current.name); // prints <root>
   this.ngZone.run(() => {
     // console.log(Zone.current.name); // prints angular
     this.docdate = e.target.value;
   });
});

How can I use a jquery plugin (like datedropper or Select2) and after the user changes the value, update the underlying input control in jquery and at the same time active the Angular2 form validation?

我会实施 ControlValueAccessor 像：

export const DATE_DROPPER_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => DateDropperValueAccessor),
  multi: true
};

@Directive({
  selector: 'input.spring-date',
  providers: [DATE_DROPPER_VALUE_ACCESSOR]
})
export class DateDropperValueAccessor implements ControlValueAccessor {
  constructor(private _renderer: Renderer, private _elementRef: ElementRef, private ngZone: NgZone) { }

  writeValue(value: any): void {
    this._renderer.setElementProperty(this._elementRef.nativeElement, 'value', value);
  }

  ngOnInit() {
    $(this._elementRef.nativeElement).dateDropper().on('change', (e: any) => {
      this.ngZone.run(() => this.onChange(e.target.value));
    });
  }

  onChange = (_: any) => { };
  onTouched = () => { };

  registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
  registerOnTouched(fn: () => void): void { this.onTouched = fn; }
}

Plunker Example

另见

Angular2：当 jquery 插件附加到 ng-form 对象时如何触发 ng-valid？

Angular2: How to trigger ng-valid when jquery plugin is attached to ng-form object?

forms

validation

jquery-plugins

angular