У меня есть компонент формы, где я использовал его для добавления и редактирования. Однако есть проблема, не знаю, как ее решить
<button *ngIf="!editMode" ion-button type="submit" [disabled]="!experienceForm.valid" (click)="save(experienceForm)">
Save
</button>
<button *ngIf="editMode" ion-button type="submit" [disabled]="!experienceForm.valid" (click)="update(experienceForm)">
Update
</button>
приведенный выше код говорит сам за себя. Не забудьте упомянуть, что если форма предназначена для редактирования, я заполнил поля с помощью ngModel, чтобы пользователь мог редактировать.
Кнопка обновления не должна быть отключена, если форма действительна (имеется в виду, что все поля в настоящее время действительны).. но, насколько я проверял, этот !experienceForm.valid не работает, когда форма вызывается для РЕДАКТИРОВАНИЯ, если я заменяю ее любым из атрибутов touch или dirty, например [disabled]="!experiencForm.dirty", тогда все работает. но почему-то valid не срабатывает, если я не ввожу заново все поля.
как решить эту проблему! Ниже я предоставил образец всего кода:
.ts:
constructor(...){
this.userId = navParams.get('userId'); // get passed params
this.userExp = navParams.get('userExperience'); // get passed params
this.experienceForm = this.formBuilder.group({
myInput1 : ['', Validators.required],
myInput2: ['', Validators.required]
}
ionViewDidLoad(){
if(this.userExp !== 'null'){ // if not null , then Its for editing
this.editMode = true;
this.myInputModel1 = this.userExp.value; // populating the fields
this.myInputModel2 = this.userExp.value;
}
}
.html: // !experience.valid здесь не срабатывает для кнопки Update
<form [formGroup]="experienceForm" novalidate>
<ion-item>
<ion-label class="labels" floating>First</ion-label>
<ion-input type="text" formControlName="myInput1" [(ngModel)]="myInputModel1"></ion-input>
</ion-item>
///
<button *ngIf="!editMode" ion-button type="submit" [disabled]="!experienceForm.valid" (click)="save(experienceForm)">
Save
</button>
<button *ngIf="editMode" ion-button type="submit" [disabled]="!experienceForm.valid && !experienceForm.dirty" (click)="update(experienceForm)">
Update
</button>
</form>
