Question

我遇到的问题是我没有从* ngFor中的* ngIf语句中获得预期的功能。我正在使用它来迭代自定义验证消息，每个ngIf都有一个唯一的语句。以下是我正在使用的component.html文件：

<div class="form-group">
<label for="{{title}}">First Name:</label>
<input type="text" class="form-control" id="{{title}}" name="{{title}}" [(ngModel)]="vm.title" [ngModelOptions]="{standalone: true}" #title="ngModel" minlength="{{minLength}}" maxlength="{{maxLength}}" required />
<div *ngIf="title.errors && (title.dirty || title.touched)" class="alert alert-danger">
    <div *ngFor="let validation of validations">
        <div *ngIf="validation.method">{{validation.message}}</div>
    </div>
</div>

这是component.ts文件：

import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'textbox',
    templateUrl: './textbox.component.html',
    styleUrls: ['./textbox.component.css']
})

export class TextboxComponent implements OnInit {
    @Input('title') title: string;
    @Input('required') required: boolean;
    @Input('required-message') requiredMessage: string;
    @Input('min-length') minLength: number;
    @Input('min-length-message') minLengthMessage: string;
    @Input('max-length') maxLength: number;
    @Input('max-length-message') maxLengthMessage: string;
    validations: Validation[] = [];

    public vm: SignUp;

    ngOnInit() {
        this.vm = new SignUp();
        if (this.required) {
            if (this.requiredMessage[0] != "") {
                this.validations.push(new Validation(this.title + ".errors.required", this.requiredMessage));
            } else {
                this.validations.push(new Validation("!" + this.title + ".errors.required", "First name is required"));
            }
        } else {
            //make not required
        }
        if (this.minLength) {
            if (this.minLengthMessage) {
                this.validations.push(new Validation(this.title + ".errors.minlength", this.minLengthMessage));
            } else {
                this.validations.push(new Validation("!" + this.title + ".errors.minlength", "Minimun length is " + this.minLength));
            }
        }
        if (this.maxLength) {
            if (this.maxLengthMessage) {
                this.validations.push(new Validation(this.title + ".errors.maxlength", this.maxLengthMessage));
            } else {
                this.validations.push(new Validation("!" + this.title + ".errors.maxlength", "Maximun length is " + this.maxLength));
            }
        }
        for (var i = 0; i > this.validations.length; i++) {
            console.log(this.validations[i].method);
            console.log(this.validations[i].message);
        }
    }
}
export class SignUp {
    nameFirst: string;
    nameLast: string;
    username: string;
    password: string;
}
export class Validation {
    constructor(public method: string, public message: string) {
        console.log(method);
        console.log(message);
    }
}

我正在调用另一个组件中的组件：

<div class="row">
    <form #form="ngForm">
        <div class="form-group">
            <textbox [title]="'nameFirst'" [required]="true" [required-message]="'required message test'" [min-length]="5" [min-length-message]="'minimum length test'" [max-length]="10" [max-length-message]="'maximum length test'"></textbox>
        </div>
    </form>
</div>

最终发生的是所有验证消息都会显示，无论是否应该触发它们。例如，即使我没有接近最大字符数的位置，也会显示“最大长度测试”。

这是一个玩弄功能的玩家： https://plnkr.co/edit/IgQ9WxSHVaTz7zz0aajU

Answer 1

<div *ngIf="validation.method">{{validation.message}}</div>

只要validation.method存在，您就会显示消息。每次创建Validation时，您都会这样做：

new Validation(this.title + ".errors.minlength", this.minLengthMessage)

验证的method属性为string且永远不会为空，因此*ngIf指令始终评估为true。

Answer 2

君康说的话。此外，您似乎正在做很多不需要的工作。您是否考虑过构建Reactive Forms？这是一个简短的例子：

  createForm() {
    this.heroForm = this.fb.group({
      name: ['', Validators.required ],
      street: ['', [Validators.minLength(6), Validators.required]]
    });
  }

然后，您只需在HTML中为每个验证器使用ngIf。浏览Angular的例子。这很有用，您的代码将更容易处理：https://angular.io/guide/reactive-forms

内部角度为4 ngIf，因为没有按预期运行

2 个答案: