Question

以下是模板

          <time-shift-input 
            [start]="editingUser.defaultStart" 
            [startLabel]="'profile.defaultStart' | translate "
            [end]="editingUser.defaultEnd" 
            [endLabel]="'profile.defaultEnd' | translate "
            (onChange)="onShiftTimes($event)"></time-shift-input>
        <input type="hidden" name="defaultStart" [ngModel]="editingUser.defaultStart">
        <input type="hidden" name="defaultEnd" [ngModel]="editingUser.defaultEnd">

以下是组件

  onShiftTimes(e) {
   if ( !e.errors ) {
    this.editingUser.defaultStart = e.start;
    this.editingUser.defaultEnd = e.end;
  }
 }

 ngOnInit() {
   this.profileForm.valueChanges.subscribe( () => {

    if ( this.profileForm.dirty ) {
      this.saveComponent.hasNew(true);
      if ( this.profileForm.valid ) {
        this.saveComponent.enabled = true;
      }
    } else {
      this.saveComponent.hasNew(false);
      this.saveComponent.enabled = false;
    }

   });
 }

time-shift-input组件发出一个事件，组件调用onShiftTimes方法，表单触发valueChanges，但表单仍然是脏的：false，pristine：true

为什么？

Answer 1

这是警告和解决方案。以编程方式设置值不会触发更改检测，如其他地方标记的那样 - ngOnChanges not firing when attribute changed by Observable/subscrption

添加getter后，问题仍然存在，只有在隐式触发this.profileForm.control.markAsDirty()后才能解决。所以在上面的例子中，

  onShiftTimes(e) {
    if ( !e.errors ) {
     this.editingUser.defaultStart = e.start;
     this.editingUser.defaultEnd = e.end;
     this.profileForm.control.markAsDirty();
   }
  }

干杯。

Angular2：NgForm应该是脏的，但事实并非如此

1 个答案: