私はアンギュラ2の新機能です。顧客プロフィールの詳細を編集できるページがあります。のプロパティが変更された場合、保存ボタンを有効にする方法。私は$ watchを使ってangular1で可能であることを知っています。あなたのTSファイルでisInvalid()を作成し、そのプロパティが空であるかどうかをチェックし、そのブール値Angular2:編集ページでモデル値が変更された場合、保存ボタンを有効にする方法
答えて
最後にこの問題を解決しました。
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()" />
あなたは以下のような無効化オプションを使用することができますボタンを押して、ラインディレクティブで* ngIfを使用できる状態にします。
と非表示のために返すことができ
<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>
:
これは私のために働いた、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)
}
}
が、これは何が必要であると思います。
ありがとうVeena! (ngModelChange)= "changeVal()"を使わずに行うことができます。なぜなら私は多くのコントロールを持っており、すべてのコントロールにそれを追加したくないからです。 –
@VindhyachalKumarこれらの入力フィールドをすべてバインドするために、フォームまたはフォームグループを使用していますか?またはこれらの入力フィールドはすべて独立していますか? –
簡単です。 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>
は、あなたがそれのためにフォームコントロールの検証を使用することができます詳細
ため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"
有効です
敬具
- 1. Telerik RadgridのCommandItemsにツールチップを与える方法(バッチ編集モードで[変更の保存]ボタン、[変更のキャンセル]ボタン)
- 2. 値を検索するとテーブルの編集と保存の値が有効SAPUI5
- 3. データグリッドのテキスト列の値が変更されたときに保存ボタンを有効にする
- 4. 変更はAngular2でモデルに反映されている場合
- 5. 編集可能なdivでボタンを有効/無効にする方法js
- 6. ラジオボタンの変更時に編集テキスト値を保存
- 7. MVC Razorモデル値の編集変更
- 8. 変更された場合のみフォームを保存する
- 9. SharePoint 2013 - リボンの保存ボタン - フォームが有効でない場合に保存をキャンセルする
- 10. 自動的に保存ボタンを有効にする方法
- 11. Sharepoint 2010リボンで[プロパティの編集とページの名前の変更]ボタンが無効にされている
- 12. JTableにセルの変更を保存する場合は、ボタンが押された場合に限り保存してください。
- 13. MuleのApplication Scopeで変数を保存、編集する方法
- 14. 値が実際に変更された場合、Angular2(入力)ハンドラをチェックインする方法
- 15. リンクされたapp.configを編集してすべてのexe設定の変更を保存する方法
- 16. javascript変数にクリックされたボタンの値を保存する方法は?
- 17. 編集したUIImageの変更を同じファイルに保存
- 18. モデルが有効でない場合、エラーメッセージ
- 19. Dynamics AX 2012:AxGridView編集モードで、保存ボタンを非表示にする方法
- 20. Datatablesにチェックボックスが選択されている場合にボタンを有効/無効にする方法
- 21. mysqlクエリブラウザの編集ボタンが無効にされました
- 22. ページが有効な場合、クライアント側のボタンを無効にする
- 23. 値が別の値で変更された場合、SelectOneMenuでリストを変更する方法は?
- 24. モデルが変更された場合にループを停止
- 25. 検証が失敗した場合、WPFに保存ボタンを無効にする
- 26. ブートストラップフォームエディタ、保存されたフォームを編集するには?
- 27. 特定のユーザーのタグを編集、変更、追加、保存する方法
- 28. 1つの星のボタンがクリックされた場合に無効にされたボタンを有効にする方法
- 29. Mediawikiの編集ボタンを変更する
- 30. CRUD編集ページでフィールドを無効にする方法は?
私は以下のコンポーネントを持っています。名前/住所または郵便番号が変更された場合は、送信ボタンを有効にします。 エクスポートクラスの顧客はOnInit { を実装しています。 アドレス:文字列; 郵便番号:文字列; コンストラクタ(){} ngOnInit(){} } –