javascript - Angular 2 - 检查默认值是否已更改

Question

我对 Angular 2 非常陌生，正在努力寻找一种方法来检查我的 md-input 中的任何值是否已更改。

HTML

<md-card>
    <h3>Contact details</h3>
        <md-input-container class="containerRightMargin">
            <input mdInput placeholder="Telephone number" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.contact.telephoneNumber">
        </md-input-container>
        <md-input-container>
            <input mdInput placeholder="Email address" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.contact.email">
        </md-input-container>
        <div>
            <h3 class="headingWithButtonBeside">Address details</h3>
            <button *ngIf="!this.personalDetailsDisable" class="floatingButtonBesideHeading" md-button color="accent" title="Click to find your new address using your new postcode.">Use postcode lookup</button>
        </div>
        <md-input-container class="containerRightMargin">
            <input mdInput placeholder="Flat name" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.address.flatName">
        </md-input-container>
        <md-input-container>
            <input mdInput placeholder="Flat number" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.address.flatNumber">
        </md-input-container>
        <md-input-container class="containerRightMargin">
            <input mdInput placeholder="House name" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.address.houseName">
        </md-input-container>
        <md-input-container>
            <input mdInput placeholder="House number" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.address.houseNumber">
        </md-input-container>
        <md-input-container class="containerRightMargin">
            <input mdInput placeholder="Street" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.address.street">
        </md-input-container>
        <md-input-container>
            <input mdInput placeholder="District" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.address.district">
        </md-input-container>
        <md-input-container class="containerRightMargin">
            <input mdInput placeholder="City" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.address.city">
        </md-input-container>
        <md-input-container>
            <input mdInput placeholder="County" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.address.county">
        </md-input-container>
        <md-input-container class="containerRightMargin">
            <input mdInput placeholder="Country" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.address.country">
        </md-input-container>
        <md-input-container>
            <input mdInput placeholder="Postcode" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.address.postCode">
        </md-input-container>
</md-card>

我不知道如何检查我可以检查所有字段。原因是，除非任何字段值从我的服务返回的默认值发生更改，否则我希望显示“保存”按钮，否则我不希望显示保存按钮。

我知道这必须在我的组件中完成，我已经看到了 SimpleChange 等示例，但我根本无法让它工作

Answer 1

如果您可以分享您的组件源代码，我们可以看到更多。但到目前为止应该是这样的。 Link to Angular docs.

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements OnChanges {
  @Input()
  prop: number;

  ngOnChanges(changes: SimpleChanges) {
    // changes.prop contains the old and the new value...
  }
}