时间戳

首页 > 解决方案 > 如何将索引值传递给 *ngIf 表达式

angular - 如何将索引值传递给 *ngIf 表达式

问题描述

我有一个使用 FormArray 添加更多标签字段的表单。我在每个字段上都使用了一个验证器，我想在每个输入了无效标签的字段下显示错误消息。问题是，我不知道如何将标签的索引传递给 *ngIf 表达式。我尝试使用：

*ngIf="commentForm.controls.i.errors.validError"

*ngIf="commentForm.controls[i].errors.validError"

*ngIf="commentForm.controls.$i.errors.validError"

但每一个都给我错误：

类型错误：“_co.commentForm.controls.i 未定义”

类型错误：“_co.commentForm.controls[_v.context.index] 未定义”

类型错误：“_co.commentForm.controls.$i 未定义”

我怎样才能让它工作？我正在使用最新的 Angular。

代码：comment-form.component.html

 <div formArrayName="tags">
       <h3>Tags</h3> <button (click)="addTag()">Add Tag</button>
    
       <div *ngFor="let tagname of tags.controls; let i=index">
          <label>
              Tag:
              <input type="text" [formControlName]="i">
              <div *ngIf="submitted && commentForm.controls.i.errors" class="errorbox">
                  <div *ngIf="commentForm.controls.i.errors.validError" class ="error">This tag is invalid!</div>
              </div>
          </label>
       </div>
</div>

评论-form.component.ts：

@Component({
  selector: 'app-comment-form',
  templateUrl: './comment-form.component.html',
  styleUrls: ['./comment-form.component.scss']
})
export class CommentFormComponent implements OnInit {

  commentForm: FormGroup;
  submitted = false;
  success = false;

  get tags() {
    return this.commentForm.get('tags') as FormArray;
  }
  addTag() {
    this.tags.push(this.formBuilder.control(''));
  }

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.commentForm = this.formBuilder.group({
      name: ['', [Validators.required, Validators.minLength(3), nameValidator()]],
      email: ['', [Validators.required, emailValidator()]],
      comment: ['', [Validators.required, commentValidator()]],
      tags: this.formBuilder.array([''], tagsValidator()) 
    });
  }

  onSubmit() {

    this.submitted = true;

    if (this.commentForm.invalid) {
        return;
    }

    this.success = true;
}

}

附加信息：添加标签有效，标签验证有效，我只需要在验证返回 false 时显示错误消息。我不能这样做，因为 *ngIf="commentForm.controls[TAGNAME].errors.validError" 不起作用而且它不起作用，因为我将标记名传递给它的方式有问题

标签： angular

解决方案

您好要使用索引，您需要一个循环

<ul>
  <li *ngFor="let item of items; let i = index">
    <a *ngIf="i % 2 = 0">Link {{ item }} number {{ i }}</a>
  </li>
</ul>

编辑： 我的答案不完整，你不需要在你的情况下使用 i，只需像 forEach 函数一样访问值。在我的例子中，就像你的 {{ item }} == item == items[i]

推荐阅读