Ionic2 모델 기반 폼 유효성 검사 제출

Question

제출 단추 (로컬 저장)를 클릭하면 입력 필드에 오류 메시지를 표시하려고합니다. 다른 제안이 있으면 알려주세요.

다음은 양식입니다. 이제 필드는 비어 있습니다. 제출 버튼을 클릭하면 오류 메시지가 모든 잘못된 필드 아래에 인쇄됩니다. 내가 버튼을 클릭하면

나는이를 원한다.

여기 여기

<form [formGroup] = 'sellerData' (submit) = "saveLocally(sellerData.value)"> 
     <ion-list> 
      <ion-item> 
       <ion-label>Ownership *</ion-label> 
       <ion-select #Ownership formControlName = "Ownership"> 
        <ion-option value = '1' placeholder = "Single">Single</ion-option> 
        <ion-option value = '2' placeholder = "Double">Double</ion-option> 
       </ion-select> 
      </ion-item> 
      <div> 
       <ng-container *ngFor = "let validation of validation_messages.Ownership"> 
        <div class = "error-message" *ngIf = "sellerData.get('Ownership').hasError(validation.type) && (sellerData.get('Ownership').dirty || sellerData.get('Ownership').touched)"> 
         {{ validation.message }} 
        </div> 
       </ng-container> 
      </div> 
      <ion-item> 
       <ion-input formControlName = "FirstName" placeholder = "First name *"></ion-input> 
      </ion-item> 
      <div> 
       <ng-container *ngFor = "let validation of validation_messages.FirstName"> 
        <div class = "error-message" *ngIf = "sellerData.get('FirstName').hasError(validation.type) && (sellerData.get('FirstName').dirty || sellerData.get('FirstName').touched)"> 
         {{ validation.message }} 
        </div> 
       </ng-container> 
      </div> 
      <ion-item> 
       <ion-input formControlName = "LastName" placeholder = "Last name *"></ion-input> 
      </ion-item> 
      <div> 
       <ng-container *ngFor = "let validation of validation_messages.LastName"> 
        <div class = "error-message" *ngIf = "sellerData.get('LastName').hasError(validation.type) && (sellerData.get('LastName').dirty || sellerData.get('LastName').touched)"> 
         {{ validation.message }} 
        </div> 
       </ng-container> 
      </div> 
      <ion-list [hidden] = "!(Ownership.value == '2')"> 
       <ion-item> 
        <ion-input formControlName = "FirstName2" placeholder = "First name(2nd Owner) *"></ion-input> 
       </ion-item> 
       <div> 
        <ng-container *ngFor = "let validation of validation_messages.FirstName2"> 
         <div class = "error-message" *ngIf = "sellerData.get('FirstName2').hasError(validation.type) && (sellerData.get('FirstName2').dirty || sellerData.get('FirstName2').touched)"> 
          {{ validation.message }} 
         </div> 
        </ng-container> 
       </div> 
       <ion-item> 
        <ion-input formControlName = "LastName2" placeholder = "Last name(2nd Owner) *"></ion-input> 
       </ion-item> 
       <div> 
        <ng-container *ngFor = "let validation of validation_messages.LastName2"> 
         <div class = "error-message" *ngIf = "sellerData.get('LastName2').hasError(validation.type) && (sellerData.get('LastName2').dirty || sellerData.get('LastName2').touched)"> 
          {{ validation.message }} 
         </div> 
        </ng-container> 
       </div> 
      </ion-list> 
     </ion-list> 
     <ion-list> 
      <ion-item text-center> 
       <button #SaveLocally [disabled] = "!AcceptTerms.checked" block large ion-button type = "submit">Save Locally</button> 
      </ion-item> 
     </ion-list> 
    </form> 

이 .TS 당신은 당신이 제출 때 true로 전환 부울 플래그를 추가 할 수

export class SalePage { 
    sellerData: FormGroup; 
    constructor(
    public navCtrl: NavController, 
    public navParams: NavParams, 
    public formBuilder: FormBuilder,) 
    { 
     this.sellerForm() 
    } 
    saveLocally(sellerData: FormGroup) 
    { 
     if(sellerData.valid) 
     { 

     } 
     else 
     { 
      this.notifier.notificationPopup("Inavlid form! Please fill the form"); 
     } 
    } 
    sellerForm() 
    { 
     this.sellerData = this.formBuilder.group(
     { 
      Ownership: ['', Validators.required], 
      FirstName: ['', Validators.required], 
      LastName: ['', Validators.required], 
      FirstName2: [''], 
      LastName2: [''] 
     }); 
     this.sellerData.patchValue(
     { 
      FirstName2: ['', this.secondOwner()], 
      LastName2: ['', this.secondOwner()] 
     }); 
    } 
    secondOwner() 
    { 
     if(this.sellerData.get("Ownership").value == 2) 
      return Validators.required; 
    } 
/********************************Validation Messages*********************************/ 
    validation_messages = 
    { 
     'Ownership': [ 
      { type: 'required', message: 'This field is required.' } 
     ], 
     'FirstName': [ 
      { type: 'required', message: 'This field is required.' } 
     ], 
     'LastName': [ 
      { type: 'required', message: 'This field is required..' } 
     ], 
     'FirstName2': [ 
      { type: 'required', message: 'This field is required.' } 
     ], 
     'LastName2': [ 
      { type: 'required', message: 'This field is required.' } 
     ] 
    }; 
}