Ionic2 model driven form validation on submit

Question

I want to show error messages in input fields when submit button(save locally) is clicked. If you have any other suggestion let me know.

Here's the form. Now the fields are blank. When I click submit button error messages shall be printed below every invalid field.

I want this when I click the button.

Here's template file

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

Here's .ts file

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.' }
        ]
    };
}

Answer 1

You could add a boolean flag, which you switch to true when you submit the form and then use that in your condition to show message.

Another option is to add the ngForm directive and its submitted property:

<form ... #myForm="ngForm">

and then in your *ngIf:

<div *ngIf="sellerData.hasError(validation.type, 'Ownership') && myForm.submitted">

StackBlitz