Question

我在获取Angular 2反应形式的复选框的更新值时遇到问题。我有一个表格中显示的对象列表，当用户单击一行上的edit时，将调用editAccountProject函数，并应使用对象属性填充模态表单：

在组件中我有：

export class AccountProjectComponent implements OnInit {
    @ViewChild('modal') modal: ModalComponent;
    accountProjects: IAccountProject[];    
    accountProject: IAccountProject;
    accountprjFrm: FormGroup;  

    constructor(private fb: FormBuilder){}
editAccountProject(id: number) {        
        this.accountProject = this.accountProjects.filter(x => x.AccountId === id)[0];
        this.createForm();
        this.accountprjFrm.patchValue({
            AccountId: this.accountProject.AccountId,
            AccountCode: this.accountProject.AccountCode
        }); 
        this.modal.open();
    }
    createForm() {
        this.accountprjFrm.patchValue({
            AccountId: this.accountProject.AccountId,
            AccountCode: this.accountProject.AccountCode
        });
        const arrayControl = <FormArray>this.accountprjFrm.controls['AccountProjectLinks'];
        this.accountProject.AccountProjectLinks.forEach(item => {
            let newGroup = this.fb.group({
                AccountProjectId: [item.AccountProjectId],
                ProjectId: [item.ProjectId],
                ProjectName: [item.ProjectName],
                IsActive: [item.IsActive]

            });
            arrayControl.push(newGroup);
        });
    }

onSubmit(formData: any) {
this._accountprojectService.put(Global.BASE_ACCOUNTPROJECT_ENDPOINT, this.accountProject.AccountId, this.accountProject);
}

加载编辑表单的html模板的模态部分：

<modal #modal>
<form novalidate (ngSubmit)="onSubmit(accountprjFrm)" [formGroup]="accountprjFrm">
    <modal-header [show-close]="true">
        <h4 class="modal-title">{{modalTitle}}</h4>
    </modal-header>
    <modal-body>
        <div class="form-group">
            <div>
                <span>AccountId*</span>
                <input readonly="readonly" type="text" class="form-control" placeholder="AccountId" formControlName="AccountId">
            </div>
            <div>
                <span>Account Code*</span>
                <input readonly="readonly" type="text" class="form-control" placeholder="AccountCode" formControlName="AccountCode">
            </div>
            <div formArrayName="AccountProjectLinks">
                <div class="form-group" [formGroupName]="i"  *ngFor="let AccountProjectLink of AccountProjectLinks.controls; let i=index">
                    <input type="text" style="float: left; width: 200px" readonly="readonly" class="form-control" formControlName="ProjectName" placeholder="ProjectName" />

                    <input type="checkbox" style="width: 50px" class="form-control"  
                           formControlName="IsActive" placeholder="IsActive" /> 
                    <input type="hidden" style="width: 50px" class="form-control" formControlName="AccountProjectId" placeholder="AccountProjectId"/>
                    <input type="hidden" class="form-control" formControlName="ProjectId" placeholder="ProjectId" style="clear: both"/>
                </div>
            </div>
        </div>
    </modal-body>
    <modal-footer>
        <div>
            <a class="btn btn-default" (click)="modal.dismiss()">Cancel</a>
            <button type="submit"  class="btn btn-primary">Update</button>
        </div>
    </modal-footer>
</form>

模型：

import {IAccountProjectLink} from "./account-project-link"
export interface IAccountProject {
    AccountId: number,
    AccountCode: string;
    AccountProjectLinks: IAccountProjectLink[];

}

export interface IAccountProjectLink {
    AccountProjectId: number;
    ProjectId: number;
    ProjectName: string;
    IsActive: boolean;

}

当我选中/取消选中IsActive复选框时，我希望相应地更新IsActive字段，但我遗漏了一些东西。

有人可以告诉我为了更新我的IsActive值我必须做些什么吗？

Answer 1

您需要在组件初始化时初始化组表单，在您的情况下，它似乎根本没有初始化。

很难为这个问题获取所有资源，所以我尝试用较少的组件进行模拟，但这应该可以帮助你开始。

我不确定你的Modal或AccountProjectLinks是如何工作的，但我可以说你至少需要这样的东西

  ngOnInit() {

    let AccountProjectLinks = new FormArray([]);

    AccountProjectLinks.push(
      new FormGroup({
        'ProjectName': new FormControl(''),
        'IsActive': new FormControl(true),
        'AccountProjectId': new FormControl(''),
        'ProjectId': new FormControl('')
      })
    );

    this.accountprjFrm = new FormGroup({
      'AccountId': new FormControl(''),
      'AccountCode': new FormControl(''),
      'AccountProjectLinks': AccountProjectLinks
    });
  };

你的html部分看起来差不多完整，我会遍历ngFor循环中的主窗体，并获取数组成员

 <form novalidate (ngSubmit)="onSubmit(accountprjFrm)" [formGroup]="accountprjFrm">
      <div class="form-group">
        <div>
          <span>AccountId*</span>
          <input readonly="readonly" type="text" class="form-control" placeholder="AccountId" formControlName="AccountId">
        </div>
        <div>
          <span>Account Code*</span>
          <input readonly="readonly" type="text" class="form-control" placeholder="AccountCode" formControlName="AccountCode">
        </div>
        <div formArrayName="AccountProjectLinks">
          <div class="form-group"  *ngFor="let AccountProjectLink of accountprjFrm.get('AccountProjectLinks').controls; let i=index">
            <div [formGroupName]="i" >
            <input type="text" readonly="readonly" class="form-control" formControlName="ProjectName" placeholder="ProjectName" />

            <input type="checkbox"  class="form-control"
                   formControlName="IsActive" placeholder="IsActive" />
            <input type="hidden"  class="form-control" formControlName="AccountProjectId" placeholder="AccountProjectId"/>
            <input type="hidden" class="form-control" formControlName="ProjectId" placeholder="ProjectId" style="clear: both"/>
          </div>
          </div>
        </div>
      </div>
      <div>
        <a class="btn btn-default" (click)="modal.dismiss()">Cancel</a>
        <button type="submit"  class="btn btn-primary">Update</button>
      </div>
  </form>

FormArray组中的复选框值未更新

1 个答案: