Angular2：編集ページでモデル値が変更された場合、保存ボタンを有効にする方法

Question

私はアンギュラ2の新機能です。顧客プロフィールの詳細を編集できるページがあります。のプロパティが変更された場合、保存ボタンを有効にする方法。私は$ watchを使ってangular1で可能であることを知っています。あなたのTSファイルでisInvalid（）を作成し、そのプロパティが空であるかどうかをチェックし、そのブール値

Answer 1

最後にこの問題を解決しました。

import { Component, Input, Output, OnInit, AfterViewInit, EventEmitter, ViewChild } from '@angular/core'; 

@Component({ 
    selector: 'subscribe-modification', 
    templateUrl: './subscribe.component.html' 
}) 

export class SampleModifyComponent implements OnInit, AfterViewInit { 
disableSaveSampleButton: boolean = true; 
@ViewChild('sampleModifyForm') sampleForm; 

ngAfterViewInit() { 
    setTimeout(() => { 
      this.sampleForm.control.valueChanges.subscribe(values => this.enableSaveSampleButton()); 
    }, 1000); 
} 

enableSaveSampleButton() { 
    console.log('change'); 
    this.disableSaveSampleButton = false; 
    } 
} 



HTML 
<button id="btnSave" class="btn btn-primary" (click)="save()" /> 

Answer 2

あなたは以下のような無効化オプションを使用することができますボタンを押して、ラインディレクティブで* ngIfを使用できる状態にします。

Answer 3

と非表示のために返すことができ

<button [disabled]="isInvalid()" type="button" (click) = "searchClick()" class="button is-info"> 
      <span class="icon is-small"> 
      <i class="fa fa-search" aria-hidden="true"></i> 
      </span> 
      <span>Search</span> 
    </button> 

：

Answer 4

これは私のために働いた、pls try。あなたのHTMLで 、あなたのコンポーネントで

<input type="text" [ngModel]="name" (ngModelChange)="changeVal()" > 
<input type="text" [ngModel]="address" (ngModelChange)="changeVal()" > 
<input type="text" [ngModel]="postcode" (ngModelChange)="changeVal()" > 

<button [disabled]="noChangeYet" (click)="clicked()" > 
    <span>SUBMIT</span> 
</button> 

export class customer implements OnInit { 
    name: string; 
    address: string; 
    postcode: string; 
    noChangeYet:boolean = true; 

    constructor() {} 

    changeVal(){ // triggers on change of any field(s) 
    this.noChangeYet = false; 
    } 

    clicked(){ 
    // your function data after click (if any) 
    } 
} 

が、これは何が必要であると思います。

Answer 5

簡単です。 dirty@angular/formsを使用している場合は、フォームを確認してください。フォームデータが変更されたかどうかを確認するために

<h2>Hero Detail</h2> 
    <h3><i>A FormGroup with multiple FormControls</i></h3> 
    <form [formGroup]="heroForm" novalidate> 
<button (click)="submit()" [disabled]="!heroForm.dirty" type="button">Submit</button> 
     <div class="form-group"> 
     <label class="center-block">Name: 
      <input class="form-control" formControlName="name"> 
     </label> 
     </div> 
     <div class="form-group"> 
     <label class="center-block">Street: 
      <input class="form-control" formControlName="street"> 
     </label> 
     </div> 
     <div class="form-group"> 
     <label class="center-block">City: 
      <input class="form-control" formControlName="city"> 
     </label> 
     </div> 
     <div class="form-group"> 
     <label class="center-block">State: 
      <select class="form-control" formControlName="state"> 
       <option *ngFor="let state of states" [value]="state">{{state}}</option> 
      </select> 
     </label> 
     </div> 
     <div class="form-group"> 
     <label class="center-block">Zip Code: 
      <input class="form-control" formControlName="zip"> 
     </label> 
     </div> 
     <div class="form-group radio"> 
     <h4>Super power:</h4> 
     <label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label> 
     <label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label> 
     <label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label> 
     </div> 
     <div class="checkbox"> 
     <label class="center-block"> 
      <input type="checkbox" formControlName="sidekick">I have a sidekick. 
     </label> 
     </div> 
    </form> 

使用heroForm.dirty：

はフォーム

export class HeroDetailComponent4 { 
    heroForm: FormGroup; 
    states = states; 

    constructor(private fb: FormBuilder) { 
    this.createForm(); 
    } 

    createForm() { 
    this.heroForm = this.fb.group({ 
     name: ['', Validators.required ], 
     street: '', 
     city: '', 
     state: '', 
     zip: '', 
     power: '', 
     sidekick: '' 
    }); 
    } 
} 

HTMLを作成します。 heroForm内のコントロールが変更された場合はtrueに設定されます。

<button (click)="submit()" [disabled]="!heroForm.dirty" type="button">Submit</button> 

は、あなたがそれのためにフォームコントロールの検証を使用することができます詳細

Answer 6

ためangular docsを参照してください。 HTMLテンプレートでは、このような いくつかのことは：

this.form = this.bf.group({ 
    fname: [null, Validators.compose([ 
    Validators.required, 
    Validators.minLength(2), 
    Validators.maxLength(20), 
    Validators.pattern('^[\u0600-\u06FF, \u0590-\u05FF]*$')])], 
}); 

場合：

<form fxLayout="column" [formGroup]="form"> 
      <mat-form-field class="mb-1"> 
      <input matInput [(ngModel)]="userProfileChangeModel.firstName" placeholder="نام" 
        [formControl]="form1.controls['fname']"> 
      <small *ngIf="form1.controls['fname'].hasError('required') && form1.controls['fname'].touched" 
        class="mat-text-warn">لطفا نام را وارد نمایید. 
      </small> 
      <small *ngIf="form1.controls['fname'].hasError('minlength') && form1.controls['fname'].touched" 
        class="mat-text-warn">نام باید حداقل 2 کاراکتر باشد. 
      </small> 
      <small *ngIf="form1.controls['fname'].hasError('pattern') && form1.controls['fname'].touched" 
        class="mat-text-warn">لطفا از حروف فارسی استفاده نمائید. 
      </small> 

      </mat-form-field> 
      <mat-card-actions> 
      <button mat-raised-button (click)="editUser()" color="primary" [disabled]="!form1.valid" type="submit"> 
       ذخیره 
      </button> 
      </mat-card-actions> 
     </form> 

とTSファイルでこのような

ボタンがアクティブになり、省

[disabled]="!form1.valid" 

有効です

敬具