Angular 2 - 检查是否有任何默认值已更改

时间:2017-07-07 08:33:14

标签: javascript angular2-template angular2-forms angular2-directives

我对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>

我不知道怎么检查我可以检查一个中的所有字段。原因是除非任何字段值从我的服务返回的默认值更改,否则我想要一个&#39; Save&#39;按钮显示其他明智的我不希望显示保存按钮。

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

1 个答案:

答案 0 :(得分: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...
  }
}