使用没有 formGroup 的表单数组

问题描述

我有一个常规表单，但我也希望某些字段使用 FormGroup，因为此特定数组具有更敏感的数据，因此位于子集合中（使用 Firestore）。我向我的对象添加了一个 formArray，但我在模板中遇到了问题。这是我在 ts 文件中的代码

  agency$: Observable<Agency> = this.refresh$.pipe(switchMap(refresh => this.afs
    .collection<Agency>('agencies')
    .doc<Agency>(this.agencyId)
    .valueChanges()
    .pipe(
      concatMap((agency: Agency) =>
        combineLatest([
          this.afStorage.storage
            .refFromURL('gs://agency-logos-paid-keeper')
            .child(`/${agency.agencyId}.png`)
            .getDownloadURL().catch(() => ""),this.afStorage.storage
            .refFromURL('gs://benefit-cards-paid-keeper')
            .child(`/${agency.agencyId}.png`)
            .getDownloadURL().catch(() => ""),this.afs.collection<Contacts>(`agencies/${agency.agencyId}/contacts`).get()]).pipe(
            map(([logoUrl,benefitCardPhotoUrl,contactsSnapshots]) => {
              const contacts = contactsSnapshots.docs.map(doc => {
                var contact = doc.data()
                this.contactsForm.push(this.fb.group({
                  contactId: [contact.contactId,Validators.required],name: [contact.name,email: [contact.email,Validators.email],phone: [contact.phone,type: this.fb.control("type")
                }));
              });
              console.log(contacts);
              console.log(agency);
              return {
              ...agency,logoUrl,// contacts : this.contactsForm

          }
          })
        )))));

  providers = Provider;
  active: boolean;
  provider: string;
  contactsForm: FormArray = this.fb.array([]);
  // editAgenciesForm: FormGroup = this.fb.group({contactsForm: this.fb.array([])})

并在模板中

<div *ngIf="agency$ | async as agency">
  <div class="btn-group">
    <button
      type="button"
      class="btn btn-sm btn-secondary"
      (click)="backClicked()">Back
    </button>
    <button
      type="button"
      class="btn btn-sm btn-secondary"
      (click)="archiveAgency()">Delete Agency
    </button>
  </div>
  <form clrForm (ngSubmit)="onSubmit(agency)">
    <clr-input-container>
      <label>Company Name</label>
      <input clrInput type="text" [(ngModel)]="agency.name" [ngModelOptions]="{standalone: true}"  name="name" required/>
      <clr-control-error>Name is required</clr-control-error>
    </clr-input-container>
    <clr-input-container>
      <label>Phone</label>
      <input clrInput type="text" [(ngModel)]="agency.phone" [ngModelOptions]="{standalone: true}" name="phone"/>
    </clr-input-container>
    <clr-input-container>
      <label>Card Name</label>
      <input clrInput type="text" [(ngModel)]="agency.benefitsCardName"  [ngModelOptions]="{standalone: true}"name="card"/>
    </clr-input-container>
    <clr-input-container>
      <label>Payer Name</label>
      <input clrInput type="text" [(ngModel)]="agency.payerName" [ngModelOptions]="{standalone: true}" name="payer"/>
    </clr-input-container>
    <clr-input-container>
      <label>Daily $$ Limit</label>
      <input clrInput type="text" [(ngModel)]="agency.dailyAmountLimit" [ngModelOptions]="{standalone: true}" name="dailyAmountLimit"/>
    </clr-input-container>
    <clr-input-container>
      <label>Weekly $$ Limit</label>
      <input clrInput type="text" [(ngModel)]="agency.weeklyAmountLimit" [ngModelOptions]="{standalone: true}" name="weekylAmountLimit"/>
    </clr-input-container>
    <clr-input-container>
      <label>Weekly Limit</label>
      <input clrInput type="text" [(ngModel)]="agency.weeklyCountLimit" [ngModelOptions]="{standalone: true}" name="weeklyCountLimit"/>
    </clr-input-container>
    <clr-input-container>
      <label>Max Amount</label>
      <input clrInput type="text" [(ngModel)]="agency.maxTransactionAmount" [ngModelOptions]="{standalone: true}" name="maxTransactionAmount"/>
    </clr-input-container>
    <clr-radio-container clrInline>
      <label>Frequency</label>
      <clr-radio-wrapper>
        <input clrRadio type="radio" value="weekly" [(ngModel)]="agency.payroll.frequency" [ngModelOptions]="{standalone: true}"
               name="agency.payroll.frequency"/>
        <label>Weekly</label>
      </clr-radio-wrapper>
      <clr-radio-wrapper>
        <input clrRadio type="radio" value="bi-weekly" [(ngModel)]="agency.payroll.frequency" [ngModelOptions]="{standalone: true}"
               name="agency.payroll.frequency"/>
        <label>Bi-Weekly</label>
      </clr-radio-wrapper>
    </clr-radio-container>
    <clr-radio-container clrInline>
      <label>Holiday Policy</label>
      <clr-radio-wrapper>
        <input clrRadio type="radio" value="before" [(ngModel)]="agency.payroll.holidayPolicy" [ngModelOptions]="{standalone: true}" name="holidayPolicy"/>
        <label>Before</label>
      </clr-radio-wrapper>
      <clr-radio-wrapper>
        <input clrRadio type="radio" value="after" [(ngModel)]="agency.payroll.holidayPolicy" [ngModelOptions]="{standalone: true}" name="holidayPolicy"/>
        <label>After</label>
      </clr-radio-wrapper>
    </clr-radio-container>
    <clr-comboBox-container>
      <label>Payday</label>
      <clr-comboBox placeholder="click to display value" [(ngModel)]="agency.payroll.payday" [ngModelOptions]="{standalone: true}" name="payday">
        <clr-options>
          <clr-option clrValue="Sunday">Sunday</clr-option>
          <clr-option clrValue="Monday">Monday</clr-option>
          <clr-option clrValue="Tuesday">Tuesday</clr-option>
          <clr-option clrValue="Wednesday">Wednesday</clr-option>
          <clr-option clrValue="Thursday">Thursday</clr-option>
          <clr-option clrValue="Friday">Friday</clr-option>
          <clr-option clrValue="Saturday">Saturday</clr-option>
        </clr-options>
      </clr-comboBox>
    </clr-comboBox-container>
    <clr-comboBox-container>
      <label>Start Of Week</label>
      <clr-comboBox placeholder="click to display value" [(ngModel)]="agency.payroll.startOfWeek" [ngModelOptions]="{standalone: true}" name="startOfWeek">
        <clr-options>
          <clr-option clrValue="Sunday">Sunday</clr-option>
          <clr-option clrValue="Monday">Monday</clr-option>
          <clr-option clrValue="Tuesday">Tuesday</clr-option>
          <clr-option clrValue="Wednesday">Wednesday</clr-option>
          <clr-option clrValue="Thursday">Thursday</clr-option>
          <clr-option clrValue="Friday">Friday</clr-option>
          <clr-option clrValue="Saturday">Saturday</clr-option>
        </clr-options>
      </clr-comboBox>
    </clr-comboBox-container>
    <clr-comboBox-container>
      <label>Provider</label>
      <clr-comboBox placeholder="click to display value" [(ngModel)]="agency.provider" [ngModelOptions]="{standalone: true}" name="agency.provider">
        <clr-options>
          <clr-option [clrValue]="agency.provider.providerName"
                      *clrOptionItems="let provider of providers; field:'providerName'"
          >{{provider.providerName}} </clr-option>
        </clr-options>
      </clr-comboBox>
    </clr-comboBox-container>
    <clr-toggle-container>
      <clr-toggle-wrapper>
        <input type="checkBox" clrToggle [(ngModel)]="agency.pocTimesheetrequired" [ngModelOptions]="{standalone: true}" name="pocTimesheetrequired"/>
        <label>Timesheet required</label>
      </clr-toggle-wrapper>
    </clr-toggle-container>
    <clr-input-container>
      <label>logo</label>
    </clr-input-container>
    <img id="logoImg" [src]="agency.logoUrl" (error)="setDefaultPic($event)" alt='logoImage'
         (click)="selectimage.click()"
         width="300"/>
    <input id="inputlogoImg" type="file" accept=".png,.jpg" #selectimage (change)="uploadlogo($event)">
    <clr-input-container>
      <label for="benefitCardImg">Benefit Card</label>
    </clr-input-container>
    <img id="benefitCardImg" [src]="agency.benefitCardPhotoUrl" (error)="setDefaultPic($event)" width="300"
         (click)="selectimage2.click()"/>
    <input id="inputBcImg" type="file" accept=".png,.jpg" #selectimage2 (change)="uploadBc($event)">
    <clr-input-container formArrayName="contactsForm">
      <label>Contact Name</label>
      <input clrInput type="text" formControlName="contact.name"/>
    </clr-input-container>
    <div>
    </div>
    <br>
    <button class="btn btn-primary">Submit</button>
  </form>
</div>
<pre>{{contactsForm.value | json}}</pre>
<!--<div class="clr-row">-->
<!--  <div class="clr-col-6">-->
<!--    <div clrForm [formGroup]="contactsForm">-->
<!--      <div clr-form-control>-->
<!--        <label><h3>Contacts</h3></label>-->
<!--        <clr-input-container>-->
<!--          <label>Contact ID</label>-->
<!--          <input clrInput type="text" formControlName="contactId"/>-->
<!--        </clr-input-container>-->
<!--        <clr-input-container>-->
<!--          <label>Contact Name</label>-->
<!--          <input clrInput type="text" formControlName="name"/>-->
<!--        </clr-input-container>-->
<!--        <clr-input-container>-->
<!--          <label>Contact Email</label>-->
<!--          <input clrInput type="email" formControlName="email"/>-->
<!--        </clr-input-container>-->
<!--        <clr-input-container>-->
<!--          <label>Contact Phone</label>-->
<!--          <input clrInput type="phone" formControlName="phone"/>-->
<!--        </clr-input-container>-->
<!--        <br>-->
<!--        <button type="button"-->
<!--                class="btn btn-sm btn-secondary" (click)="editContactInfo()">Submit-->
<!--        </button>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
  <div class="clr-col-6">
    <div clrForm [formGroup]="apiForm">
      <div clr-form-control>
        <label><h3>Api Info</h3></label>
        <clr-input-container>
          <label>Api ID</label>
          <input clrInput type="text" formControlName="apiId"/>
        </clr-input-container>
        <clr-input-container>
          <label>Api Secret</label>
          <input clrInput type="text" formControlName="apiSecret"/>
        </clr-input-container>
        <clr-input-container>
          <label>App Key</label>
          <input clrInput type="text" formControlName="appKey"/>
        </clr-input-container>
        <clr-input-container>
          <label>App Name</label>
          <input clrInput type="text" formControlName="appName"/>
        </clr-input-container>
        <clr-input-container>
          <label>Host Address</label>
          <input clrInput type="url" formControlName="hostAddress"/>
        </clr-input-container>
        <br>
        <button type="button"
                class="btn btn-sm btn-secondary" (click)="editApiInfo()">Submit
        </button>
      </div>
    </div>
  </div>
<!--</div>-->

我在编译后收到一个错误，如下所示： vendor.js:124554 错误 错误：formArrayName 必须与父 formGroup 指令一起使用。您需要添加一个 formGroup 指令并将其传递给现有的 FormGroup 实例（您可以在类中创建一个）。

    Example:

    
<div [formGroup]="myGroup">
  <div formArrayName="cities">
    <div *ngFor="let city of cityArray.controls; index as i">
      <input [formControlName]="i">
    </div>
  </div>
</div>

In your class:

this.cityArray = new FormArray([new FormControl('SF')]);
this.myGroup = new FormGroup({
  cities: this.cityArray
});

这被截断了...我尝试添加一个formGroup，我更喜欢这样做，但是它不允许使用push，因为它只能用作数组。我不知道如何更改代码，因此它可以让我使用推送。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）