Question

AdminPanelComponent.ts

    import {Component, OnInit, ViewChild} from '@angular/core';
    import {AdminService} from '../sevices/admin.service';
    import {FormBuilder, FormArray, FormGroup, Validators} from '@angular/forms';


    @Component({
      selector: 'app-admin-panel',
      templateUrl: './admin-panel.component.html',
      styleUrls: ['./admin-panel.component.scss']
    })
    export class AdminPanelComponent implements OnInit {
      fieldId: number;
      imageMsg: string;
      uniFormGroup: FormGroup;
      constructor(private adService: AdminService, private formBuild: FormBuilder) {
        this.uniFormGroup = this.formBuild.group({
          uniName: ['', Validators.required],
          location: ['', Validators.required],
          ownership: ['Select Ownership'],
          estdate: ['', [Validators.minLength(4), Validators.maxLength(4)]],
          approvals: ['Select Approvals/Recognition'],
          uniType: ['Select University Type'],
          accreditation: ['Select Accreditation'],
          memberAIU: ['Member Of AIU'],
          admissionProcess: [''],
          highlights: [''],
          contact: this.formBuild.group({
            address: [''],
            website: [''],
          }),
          mobile: this.formBuild.array([this.mobileGroup()]),
          email: this.formBuild.array([this.emailGroup()]),
          scholarship: [''],
          facilities: [''],
          googleLoc: this.formBuild.group({
            lat: [''],
            lng: [''],
          }),
        });
      }

      ngOnInit() {
      }

      showEditModal(id, uniName) {
        this.universityName = uniName;
        this.fieldId = id;
        this.editModal.show();
        this.adService.getEditTabels('university', this.fieldId).subscribe((data: any) => {
          const facility = data.facilities.split(',');
          this.uniFormGroup.patchValue({
            uniName: data.uniName,
            location: data.location,
            ownership: data.ownership,
            estdate: data.estdate,
            approvals: data.approvals,
            uniType: data.uniType,
            accreditation: data.accreditation,
            memberAIU: data.memberAIU,
            admissionProcess: data.admissionProcess,
            highlights: data.highlights,
            scholarship: data.scholarship,
            contact: JSON.parse(data.contact),
            facilities: facility,
          });
        });
      }
      mobileGroup(): FormGroup {
        return this.formBuild.group({
          mNumber: ['', [Validators.maxLength(10), Validators.minLength(10), Validators.pattern('[0-9]+')]],
          mtitle: ''
        });
      }
      emailGroup(): FormGroup {
        return this.formBuild.group({
          emailAddress: ['', Validators.email],
          etitle: ''
        });
      }
    }

我想为mobile FormArray赋值 HTTP请求后，我收到了这样的手机

    [
       {
           "mNumber":"9800000098","mtitle":"office"
       }, 
       {
           "mNumber":"9800000098","mtitle":"Dean"
       }
]

请告知如何将此值添加到FromBuilder的反应式FromArray中我还没有在FromArray中增加价值。我直接分配了它，这是无法从数组访问的。请在showEditModal()

中添加代码的任何建议

Answer 1

您可以使用setValue（）方法将值分配给formArray。

this.uniFormGroup.get('mobile').controls[0].get('emailAddress').setValue('test data');

Answer 2

声明类或接口。

export interface MobileData {
    mNumber: number,
    mtitle: string,
}

声明组件中的变量。

 mobileArr: FormArray;
 numberList: MobileData[] = [];

从订阅请求中获取结果时填写列表。
```
this.numberList = data;
```

按如下所示修改html。

<div class="row" formArrayName="mobileArr">
    <div class="col-md-6" *ngFor="let m of numberList;  ">       
        <div class="row">
            <div class="col-md-6">
                {{m.mNumber}} 
            </div>
            <div class="col-md-6">
                {{m.mtitle}}
            </div>
        </div>                  
    </div>
</div>

以角的反应形式添加值FromArray

2 个答案: