2017-05-09 6 views
0

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

<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> 

답변

1

그것은 더 나은입니다 여기 트리거되지 않습니다 formControlNamengModel을 함께 사용하지 마십시오. 당신은 내가이 문제를 해결할 것이라고 생각

ionViewDidLoad(){ 
    if(this.userExp !== 'null'){  // if not null , then Its for editing 
    this.editMode = true; 

    this.experienceForm = this.formBuilder.group({ 
     myInput1 : [this.userExp.value, Validators.required], 
     myInput2: [this.userExp.value, Validators.required] 
    }); 
} 

으로 폼 값을 지정할 수 있습니다

관련 문제