Question

我在html代码下面使用了反应形式

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="margin-20">
        <h4>Add customer</h4>
      </div>
      <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)">
        <div class="form-group">
          <label>Name</label>
          <input type="text" class="form-control" formControlName="name">
          <small *ngIf="!myForm.controls.name.valid" class="text-danger">
              Name is required (minimum 5 characters).
            </small>
        </div>
        <!--addresses-->
        <div formArrayName="addresses">
          <div *ngFor="let address of myForm.controls.addresses.controls; let i=index" class="panel panel-default">
            <div class="panel-heading">
              <span>Address {{i + 1}}</span>
              <span class="glyphicon glyphicon-remove pull-right" *ngIf="myForm.controls.addresses.controls.length > 1" (click)="removeAddress(i)"></span>
            </div>
            <div class="panel-body" [formGroupName]="i">
              <div class="form-group col-xs-6">
                <label>street</label>
                <input type="text" class="form-control" formControlName="street">
                <small [hidden]="myForm.controls.addresses.controls[i].controls.street.valid" class="text-danger">
                    Street is required
                </small>
              </div>
              <div class="form-group col-xs-6">
                <label>postcode</label>
                <input type="text" class="form-control" formControlName="postcode">
              </div>
            </div>
          </div>
        </div>

        <div class="margin-20">
          <a (click)="addAddress()" style="cursor: default">
            Add another address +
          </a>
        </div>

        <div class="margin-20">
          <button type="submit" class="btn btn-primary pull-right" [disabled]="!myForm.valid">Submit</button>
        </div>
        <div class="clearfix"></div>

        <div class="margin-20">
          <div>myForm details:-</div>
          <pre>Is myForm valid?: <br>{{myForm.valid | json}}</pre>
          <pre>form value: <br>{{myForm.value | json}}</pre>
        </div>
      </form>
    </div>
  </div>
</div>

Dev build工作正常，但由于

，我在生产构建上遇到错误

反应式表单控件，所以我尝试使用get方法而不是控件

如下所示：

<div *ngFor="let address of myForm.get('addresses').controls; let i=index" class="panel panel-default">
            <div class="panel-heading">
              <span>Address {{i + 1}}</span>
              <span class="glyphicon glyphicon-remove pull-right" *ngIf="myForm.controls.addresses.controls.length > 1" (click)="removeAddress(i)"></span>
            </div>

但仍然出现错误，因为还有其他控件：

let address of myForm.get('addresses').controls

如何在prod构建中修复此问题？提前谢谢！

Answer 1

可以通过为组件提供get方法来修复：

get formData() { return <FormArray>this.myForm.get('Data'); }

然后在你的模板中：

<div class="form-group" *ngFor="let address of formData.controls; let i = index">

更多信息请看这样的 https://github.com/angular/angular-cli/issues/6099

编辑：2 -

*ngIf="myForm.controls.addresses.controls.length > 1"

你将面临其他控制问题 myForm.controls.addresses.controls.length

喜欢这个

myForm.get('addresses').length

尝试删除HTML文件中的控件

角度2反应形式产生错误

1 个答案: