Question

我正在以角度2创建CRUD。我正在尝试通过添加required类来使用jquery进行字段验证。

 addFieldValue() { 
        $('.myForm').find('input.required').each(function () {
            if ($(this).val() = '') {
                alert('empty')
            }
        })
        this.fieldArray.push(this.newAttribute)
        this.newAttribute = {};
    }

当我点击没有值的添加按钮时，它应该返回alert框。但是函数没有在each方法中击中。我做错了什么？

完整代码：

.HTML

<table class="table table-striped table-bordered myForm">
    <thead>
        <tr>
            <th>Code</th>
            <th>Name</th>
            <th>Price</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let field of fieldArray; let i = index">
            <td>
                <span *ngIf="editDetails">{{field.code}}</span>
                <span *ngIf="updateDetails"><input [(ngModel)]="field.code" class="form-control required" type="text" name="{{field.code}}"/></span>
            </td>
            <td>
                <span *ngIf="editDetails">{{field.name}}</span>
                <span *ngIf="updateDetails"><input [(ngModel)]="field.name" class="form-control required" type="text" name="{{field.name}}"/></span>
            </td>
            <td>
                <span *ngIf="editDetails">{{field.price}}</span>
                <span *ngIf="updateDetails"><input [(ngModel)]="field.price" class="form-control required" type="text" name="{{field.price}}"/></span>
            </td>
            <td>
                <button class="btn btn-default" type="button" (click)="editFieldValue(i,field)" *ngIf="editDetails">Edit</button>
                <button class="btn btn-default" type="button" (click)="updateFieldValue(i)" *ngIf="updateDetails">Update</button>
                <button class="btn btn-default" type="button" (click)="deleteFieldValue(i)">Delete</button>
            </td>
        </tr>
        <tr>
            <td>
                <input class="form-control" type="text" id="newAttributeCode" [(ngModel)]="newAttribute.code" name="newAttributeCode" />
            </td>
            <td>
                <input class="form-control" type="text" id="newAttributeName" [(ngModel)]="newAttribute.name" name="newAttributeName" />
            </td>
            <td>
                <input class="form-control" type="text" id="newAttributePrice" [(ngModel)]="newAttribute.price" name="newAttributePrice" />
            </td>
            <td>
                <button class="btn btn-default" type="button" (click)="addFieldValue()">Add</button>
            </td>
        </tr>
    </tbody>
    </table>

.TS

import {Component} from '@angular/core';
declare var $: any;
@Component({

    selector: 'my-employee',
    templateUrl : `app/employee/employee.component.html`
})
export class EmployeeComponent {    
    updateDetails: boolean = false;
    editDetails: boolean = true;
    private fieldArray: Array<any> = [];
    private newAttribute: any = {};

    addFieldValue() { 
        $('.myForm').find('input.required').each(function () {
            if ($(this).val() = '') {
                alert('empty')
            }
        })
        this.fieldArray.push(this.newAttribute)
        this.newAttribute = {};
    }
    editFieldValue(i, field) {
        console.log(i)
        this.updateDetails = true;
        this.editDetails= false;
    }
    updateFieldValue() {
        this.updateDetails= false;
        this.editDetails = true;
    }
    deleteFieldValue(index) {
        this.fieldArray.splice(index, 1);
    }
}

Answer 1

首先，您使用=进行比较，这是错误的，因为它是分配而不是比较。使用==比较值

如果警报没有在每个循环中触发，那么我认为你可以尝试这样的事情：

addFieldValue() {
    var errors = [];
    $('.myForm').find('input.required').each(function () {
        if ($(this).val() == '') {
            errors.push($(this));
        }
    });

    if(errors.length > 0) {
        alert("Please fill all input fields");
    }

    this.fieldArray.push(this.newAttribute)
    this.newAttribute = {};
}

这是我为你做的Fiddle，但是用jQuery风格

如何在角度2中进行jquery表单验证

1 个答案: