У меня есть форма с несколькими полями данных и двумя кнопками. Я хочу включить кнопки, только если пользователь внесет некоторые изменения в форму. Я пробовал использовать:
this.form.valueChanges.subscribe(data => console.log('form changes', data));
Но изменения обнаруживаются первоначально, когда также загружается форма. Есть ли другой способ проверить какие-либо изменения в форме. Я хочу, чтобы он вызывался только тогда, когда пользователь вносит изменения в поле, а не когда загружается форма. Ниже приведен код html и машинописный код:
profile.html:
<section>
<div>
<form [formGroup]="form">
<fieldset>
<div class="panel-group m-l-1 m-r-1 accordion vertical-scroll" id="">
<div class="form-group required no-gutter">
<label for="firstname"> First Name:</label>
<div class="col-md-7 col-lg-6">
<input type="text" class="form-control" id="firstname" placeholder="" name="firstname" title="firstname" formControlName="firstname" size="128" aria-required="true" maxlength="35">
</div>
</div>
</div>
</fieldset>
<div>
<button class="btn btn-primary" type="button" (click)="save()">Save</button>
<button class="btn btn-primary" type="button" (click)="cancel()">Cancel</button>
</div>
</form>
</div>
</section>
profile.component.ts:
export class ProfileComponent implements OnInit, AfterViewInit, OnChanges {
public form: FormGroup;
constructor(private formBuilder: FormBuilder, private app: Application) {
}
loadForm(): void {
this.form = this.formBuilder.group({
firstname: [this.app.firstName, Validators.required]
});
this.form.valueChanges.subscribe(data => console.log('form changes', data));
}
save(): void {
}
cancel(): void {
};
ngOnInit() {
this.loadForm();
}
ngAfterViewInit() {
this.loadForm();
}
}