角2 - デフォルト値が変更されているかどうかをチェック

Question

私はAngular 2に非常に新しく、md-inputの値が変更されているかどうかを調べる方法を見つけるのが苦労しています。

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

HTMLは、私は、私は1つのすべてのフィールドを確認することができますどのように確認するには考えています。理由は、フィールド値が私のサービスから返されるデフォルト値から変更されない限り、保存ボタンが表示されないように他の賢明な情報を表示することです。

私は、これが私のコンポーネントで行う必要があります知っていると私は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... 
    } 
}