提交时 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 文件

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

您可以添加一个布尔标志，当您提交表单时切换到 true，然后在您的条件中使用它来显示消息。

另一种选择是添加 ngForm 指令及其 submitted 属性:

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

然后在你的 *ngIf:

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

StackBlitz

提交时 Ionic2 模型驱动的表单验证

Ionic2 model driven form validation on submit

angular

forms

validation

ionic2

model-driven