Angular：迭代 ngForm 控件？

Question

目标是当用户单击按钮转到下一页时，阻止用户继续，并在页面部分填写但无效时显示错误指示器。

在模板驱动的表单中，我有几个使用NgModelGroup属性来表示表单中的“页面”的容器元素。在我的组件中，我想引用这个集合，以便我可以通过索引访问它们。由于我无法获取此集合（@AJT_82 在下面评论原因），这就是我的方法：

我创建了一个类来保存有关页面的信息。

export class Page
{
    title: string;
    hasError: boolean;  //should the page display an error indicator
}

pages: Page[]在我的组件中，我在 ngOnInit 中填充一个数组

ngOnInit()
{
    this.pages = [{title: "Page 1", hasError: false},
                  {title: "Page 2", hasError: false},
                  {title: "Page 3", hasError: false}]
}

@DeborahK 在她的回答中给了我

this.form.form.get('pg1')) 

获取ngModelGroup名为 'pg' + currentPg+1 的个体（+1 来匹配视图，因为数组从 0 开始），然后我可以在单击事件中使用它，该事件将导致 A）转到下一页或 B）设置属性hasError设置为 true 并且不会进入下一页。

let p = this.form.form.get("pg"+ (this.currentPg+1));
//if the page is partially filled out but not valid
if(p.invalid && p.dirty)
  this.pages[this.currentPg].hasError = true;
else
{
  //even if it's false, re-false it ;)
  this.pages[this.currentPg].hasError = false;

  //continue to next page. 
  //i.e. this.currentPg++ or this.currentPg--
}

回到模板，为了在选项卡或页面上显示错误指示器，我只需检查属性pages[currentPg].hasError。在选项卡元素上分配“has-error”类以设置选项卡样式。

export class Page
{
    title: string;
    hasError: boolean;  //should the page display an error indicator
}

这是示例的组件：

ngOnInit()
{
    this.pages = [{title: "Page 1", hasError: false},
                  {title: "Page 2", hasError: false},
                  {title: "Page 3", hasError: false}]
}

同样，如果有一种方法可以获取 ngModelGroups 的集合并将其像数组一样使用，那么很多问题都可以消失。

Answer 1

这段代码对我有用：

    Object.keys((<FormGroup>this.form.form.get('pg1')).controls).forEach(element => {
        console.log(element);
    });

但关键问题（根据你的问题下面的评论）是该代码所在的位置。我将其添加为提交按钮过程的一部分。

在 ngOnInit、ngAfterViewInit 和 ngAfterViewChecked 中，这些元素的值为 null/未定义。

如果您只需要知道表单组是否有效，您可以这样做：

    let isValid = this.form.form.get('pg1').valid;

或者，您可以使用选项卡式页面，并在任何带有验证错误的页面上显示错误图标，如下所示：

在此示例中，我使用模板驱动的表单。表单上的每个输入元素如下所示：

        <div class="form-group" 
                [ngClass]="{'has-error': (productNameVar.touched || 
                                          productNameVar.dirty || product.id !== 0) && 
                                          !productNameVar.valid }">
            <label class="col-md-2 control-label" 
                    for="productNameId">Product Name</label>

            <div class="col-md-8">
                <input class="form-control" 
                        id="productNameId" 
                        type="text" 
                        placeholder="Name (required)"
                        required
                        minlength="3"
                        [(ngModel)] = product.productName
                        name="productName"
                        #productNameVar="ngModel" />
                <span class="help-block" *ngIf="(productNameVar.touched ||
                                                 productNameVar.dirty || product.id !== 0) &&
                                                 productNameVar.errors">
                    <span *ngIf="productNameVar.errors.required">
                        Product name is required.
                    </span>
                    <span *ngIf="productNameVar.errors.minlength">
                        Product name must be at least three characters.
                    </span>
                </span>
            </div>
        </div>

您可以在此处找到此示例的完整代码：APM-Final 文件夹中的https://github.com/DeborahK/Angular-Routing 。（这是我的“Angular Routing”Pluralsight 课程中的代码。）