양식 추가 및 편집에 양식 구성 요소가 있습니다. 그러나 문제를 해결할 방법이 확실하지 않습니다.양식 재사용시 양식 유효성 검사가 작동하지 않습니다.
<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>