Question

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

* ngIf =“ commentForm.controls.i.errors.validError”

* ngIf =“ commentForm.controls [i] .errors.validError”

* ngIf =“ commentForm.controls。$ i.errors.validError”

但是每个给我一个错误：

TypeError：“ _ co.commentForm.controls.i未定义”

TypeError：“ _ co.commentForm.controls [_v.context.index]未定义”

TypeError：“ _ 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>

comment-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”不起作用，也不起作用，因为我将标记名传递给它的方式有问题

Answer 1

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

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

EDIT： 我的回答并不完整，您无需使用i，只需像forEach函数一样访问值即可。在我的示例中，像您的{{item}} == item == items [i]

Answer 2

欢迎来到社区！

您似乎正在尝试使用点运算符进行如下访问：

commentForm.controls.i.errors.validError

这是您想要的时候：

commentForm.controls[i].errors?.validError

请注意，ValidationErrors可以为null，因此您应该使用问号进行安全导航。

Answer 3

看看这个，只显示给定控件所需的错误：

<div formArrayName='tags'>
<div *ngFor='let control of form.controls.tags.controls;index as i'>
    Tag{{i}}: <input type='text' [formControlName]='i'>
    <span *ngIf='control.errors'>Required</span>

  </div>

创建了一个堆叠闪电战：https://stackblitz.com/edit/angular-conditional-ngif-formarray

Answer 4

最有效的答案是堆叠闪电战。除了弄清楚向每个标签添加错误消息的方式之外，它还帮助我弄清楚了我将验证器错误地传递给了标签。正确的方法是将验证器传递给addTag（）函数中的每个标签，而不是像我一样在ngOnInit函数中传递它一次。感谢您提供所有答案。

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

4 个答案: