title: using form array without formGroup
body: <p>I have a regular form, but I also want some of the fields to use FormGroup, as this particular array has more sensitive data and is therefore in a sub-collection(using Firestore). I added a formArray to my object, but I'm having trouble in the template. Here is my code in the ts file</p>
  <pre><code>  agency$: Observable&lt;Agency&gt; = this.refresh$.pipe(switchMap(refresh =&gt; this.afs
      .collection&lt;Agency&gt;('agencies')
      .doc&lt;Agency&gt;(this.agencyId)
      .valueChanges()
      .pipe(
        concatMap((agency: Agency) =&gt;
          combineLatest([
            this.afStorage.storage
              .refFromURL('gs://agency-logos-paid-keeper')
              .child(`/${agency.agencyId}.png`)
              .getDownloadURL().catch(() =&gt; &quot;&quot;),
            this.afStorage.storage
              .refFromURL('gs://benefit-cards-paid-keeper')
              .child(`/${agency.agencyId}.png`)
              .getDownloadURL().catch(() =&gt; &quot;&quot;),
            this.afs.collection&lt;Contacts&gt;(`agencies/${agency.agencyId}/contacts`).get()]).pipe(
              map(([logoUrl, benefitCardPhotoUrl,contactsSnapshots]) =&gt; {
                const contacts = contactsSnapshots.docs.map(doc =&gt; {
                  var contact = doc.data()
                  this.contactsForm.push(this.fb.group({
                    contactId: [contact.contactId, Validators.required],
                    name: [contact.name, Validators.required],
                    email: [contact.email, Validators.email],
                    phone: [contact.phone, Validators.required],
                    type: this.fb.control(&quot;type&quot;)
                  }));
                });
                console.log(contacts);
                console.log(agency);
                return {
                ...agency, logoUrl, benefitCardPhotoUrl,
                  // contacts : this.contactsForm
  
            }
            })
          )))));
  
    providers = Provider;
    active: boolean;
    provider: string;
    contactsForm: FormArray = this.fb.array([]);
    // editAgenciesForm: FormGroup = this.fb.group({contactsForm: this.fb.array([])})
  </code></pre>
  <p>and in the template</p>
  <pre><code>&lt;div *ngIf=&quot;agency$ | async as agency&quot;&gt;
    &lt;div class=&quot;btn-group&quot;&gt;
      &lt;button
        type=&quot;button&quot;
        class=&quot;btn btn-sm btn-secondary&quot;
        (click)=&quot;backClicked()&quot;&gt;Back
      &lt;/button&gt;
      &lt;button
        type=&quot;button&quot;
        class=&quot;btn btn-sm btn-secondary&quot;
        (click)=&quot;archiveAgency()&quot;&gt;Delete Agency
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;form clrForm (ngSubmit)=&quot;onSubmit(agency)&quot;&gt;
      &lt;clr-input-container&gt;
        &lt;label&gt;Company Name&lt;/label&gt;
        &lt;input clrInput type=&quot;text&quot; [(ngModel)]=&quot;agency.name&quot; [ngModelOptions]=&quot;{standalone: true}&quot;  name=&quot;name&quot; required/&gt;
        &lt;clr-control-error&gt;Name is required&lt;/clr-control-error&gt;
      &lt;/clr-input-container&gt;
      &lt;clr-input-container&gt;
        &lt;label&gt;Phone&lt;/label&gt;
        &lt;input clrInput type=&quot;text&quot; [(ngModel)]=&quot;agency.phone&quot; [ngModelOptions]=&quot;{standalone: true}&quot; name=&quot;phone&quot;/&gt;
      &lt;/clr-input-container&gt;
      &lt;clr-input-container&gt;
        &lt;label&gt;Card Name&lt;/label&gt;
        &lt;input clrInput type=&quot;text&quot; [(ngModel)]=&quot;agency.benefitsCardName&quot;  [ngModelOptions]=&quot;{standalone: true}&quot;name=&quot;card&quot;/&gt;
      &lt;/clr-input-container&gt;
      &lt;clr-input-container&gt;
        &lt;label&gt;Payer Name&lt;/label&gt;
        &lt;input clrInput type=&quot;text&quot; [(ngModel)]=&quot;agency.payerName&quot; [ngModelOptions]=&quot;{standalone: true}&quot; name=&quot;payer&quot;/&gt;
      &lt;/clr-input-container&gt;
      &lt;clr-input-container&gt;
        &lt;label&gt;Daily $$ Limit&lt;/label&gt;
        &lt;input clrInput type=&quot;text&quot; [(ngModel)]=&quot;agency.dailyAmountLimit&quot; [ngModelOptions]=&quot;{standalone: true}&quot; name=&quot;dailyAmountLimit&quot;/&gt;
      &lt;/clr-input-container&gt;
      &lt;clr-input-container&gt;
        &lt;label&gt;Weekly $$ Limit&lt;/label&gt;
        &lt;input clrInput type=&quot;text&quot; [(ngModel)]=&quot;agency.weeklyAmountLimit&quot; [ngModelOptions]=&quot;{standalone: true}&quot; name=&quot;weekylAmountLimit&quot;/&gt;
      &lt;/clr-input-container&gt;
      &lt;clr-input-container&gt;
        &lt;label&gt;Weekly Limit&lt;/label&gt;
        &lt;input clrInput type=&quot;text&quot; [(ngModel)]=&quot;agency.weeklyCountLimit&quot; [ngModelOptions]=&quot;{standalone: true}&quot; name=&quot;weeklyCountLimit&quot;/&gt;
      &lt;/clr-input-container&gt;
      &lt;clr-input-container&gt;
        &lt;label&gt;Max Amount&lt;/label&gt;
        &lt;input clrInput type=&quot;text&quot; [(ngModel)]=&quot;agency.maxTransactionAmount&quot; [ngModelOptions]=&quot;{standalone: true}&quot; name=&quot;maxTransactionAmount&quot;/&gt;
      &lt;/clr-input-container&gt;
      &lt;clr-radio-container clrInline&gt;
        &lt;label&gt;Frequency&lt;/label&gt;
        &lt;clr-radio-wrapper&gt;
          &lt;input clrRadio type=&quot;radio&quot; value=&quot;weekly&quot; [(ngModel)]=&quot;agency.payroll.frequency&quot; [ngModelOptions]=&quot;{standalone: true}&quot;
                 name=&quot;agency.payroll.frequency&quot;/&gt;
          &lt;label&gt;Weekly&lt;/label&gt;
        &lt;/clr-radio-wrapper&gt;
        &lt;clr-radio-wrapper&gt;
          &lt;input clrRadio type=&quot;radio&quot; value=&quot;bi-weekly&quot; [(ngModel)]=&quot;agency.payroll.frequency&quot; [ngModelOptions]=&quot;{standalone: true}&quot;
                 name=&quot;agency.payroll.frequency&quot;/&gt;
          &lt;label&gt;Bi-Weekly&lt;/label&gt;
        &lt;/clr-radio-wrapper&gt;
      &lt;/clr-radio-container&gt;
      &lt;clr-radio-container clrInline&gt;
        &lt;label&gt;Holiday Policy&lt;/label&gt;
        &lt;clr-radio-wrapper&gt;
          &lt;input clrRadio type=&quot;radio&quot; value=&quot;before&quot; [(ngModel)]=&quot;agency.payroll.holidayPolicy&quot; [ngModelOptions]=&quot;{standalone: true}&quot; name=&quot;holidayPolicy&quot;/&gt;
          &lt;label&gt;Before&lt;/label&gt;
        &lt;/clr-radio-wrapper&gt;
        &lt;clr-radio-wrapper&gt;
          &lt;input clrRadio type=&quot;radio&quot; value=&quot;after&quot; [(ngModel)]=&quot;agency.payroll.holidayPolicy&quot; [ngModelOptions]=&quot;{standalone: true}&quot; name=&quot;holidayPolicy&quot;/&gt;
          &lt;label&gt;After&lt;/label&gt;
        &lt;/clr-radio-wrapper&gt;
      &lt;/clr-radio-container&gt;
      &lt;clr-combobox-container&gt;
        &lt;label&gt;Payday&lt;/label&gt;
        &lt;clr-combobox placeholder=&quot;click to display value&quot; [(ngModel)]=&quot;agency.payroll.payday&quot; [ngModelOptions]=&quot;{standalone: true}&quot; name=&quot;payday&quot;&gt;
          &lt;clr-options&gt;
            &lt;clr-option clrValue=&quot;Sunday&quot;&gt;Sunday&lt;/clr-option&gt;
            &lt;clr-option clrValue=&quot;Monday&quot;&gt;Monday&lt;/clr-option&gt;
            &lt;clr-option clrValue=&quot;Tuesday&quot;&gt;Tuesday&lt;/clr-option&gt;
            &lt;clr-option clrValue=&quot;Wednesday&quot;&gt;Wednesday&lt;/clr-option&gt;
            &lt;clr-option clrValue=&quot;Thursday&quot;&gt;Thursday&lt;/clr-option&gt;
            &lt;clr-option clrValue=&quot;Friday&quot;&gt;Friday&lt;/clr-option&gt;
            &lt;clr-option clrValue=&quot;Saturday&quot;&gt;Saturday&lt;/clr-option&gt;
          &lt;/clr-options&gt;
        &lt;/clr-combobox&gt;
      &lt;/clr-combobox-container&gt;
      &lt;clr-combobox-container&gt;
        &lt;label&gt;Start Of Week&lt;/label&gt;
        &lt;clr-combobox placeholder=&quot;click to display value&quot; [(ngModel)]=&quot;agency.payroll.startOfWeek&quot; [ngModelOptions]=&quot;{standalone: true}&quot; name=&quot;startOfWeek&quot;&gt;
          &lt;clr-options&gt;
            &lt;clr-option clrValue=&quot;Sunday&quot;&gt;Sunday&lt;/clr-option&gt;
            &lt;clr-option clrValue=&quot;Monday&quot;&gt;Monday&lt;/clr-option&gt;
            &lt;clr-option clrValue=&quot;Tuesday&quot;&gt;Tuesday&lt;/clr-option&gt;
            &lt;clr-option clrValue=&quot;Wednesday&quot;&gt;Wednesday&lt;/clr-option&gt;
            &lt;clr-option clrValue=&quot;Thursday&quot;&gt;Thursday&lt;/clr-option&gt;
            &lt;clr-option clrValue=&quot;Friday&quot;&gt;Friday&lt;/clr-option&gt;
            &lt;clr-option clrValue=&quot;Saturday&quot;&gt;Saturday&lt;/clr-option&gt;
          &lt;/clr-options&gt;
        &lt;/clr-combobox&gt;
      &lt;/clr-combobox-container&gt;
      &lt;clr-combobox-container&gt;
        &lt;label&gt;Provider&lt;/label&gt;
        &lt;clr-combobox placeholder=&quot;click to display value&quot; [(ngModel)]=&quot;agency.provider&quot; [ngModelOptions]=&quot;{standalone: true}&quot; name=&quot;agency.provider&quot;&gt;
          &lt;clr-options&gt;
            &lt;clr-option [clrValue]=&quot;agency.provider.providerName&quot;
                        *clrOptionItems=&quot;let provider of providers; field:'providerName'&quot;
            &gt;{{provider.providerName}} &lt;/clr-option&gt;
          &lt;/clr-options&gt;
        &lt;/clr-combobox&gt;
      &lt;/clr-combobox-container&gt;
      &lt;clr-toggle-container&gt;
        &lt;clr-toggle-wrapper&gt;
          &lt;input type=&quot;checkbox&quot; clrToggle [(ngModel)]=&quot;agency.pocTimesheetRequired&quot; [ngModelOptions]=&quot;{standalone: true}&quot; name=&quot;pocTimesheetRequired&quot;/&gt;
          &lt;label&gt;Timesheet Required&lt;/label&gt;
        &lt;/clr-toggle-wrapper&gt;
      &lt;/clr-toggle-container&gt;
      &lt;clr-input-container&gt;
        &lt;label&gt;Logo&lt;/label&gt;
      &lt;/clr-input-container&gt;
      &lt;img id=&quot;logoImg&quot; [src]=&quot;agency.logoUrl&quot; (error)=&quot;setDefaultPic($event)&quot; alt='logoImage'
           (click)=&quot;selectImage.click()&quot;
           width=&quot;300&quot;/&gt;
      &lt;input id=&quot;inputLogoImg&quot; type=&quot;file&quot; accept=&quot;.png,.jpg&quot; #selectImage (change)=&quot;uploadLogo($event)&quot;&gt;
      &lt;clr-input-container&gt;
        &lt;label for=&quot;benefitCardImg&quot;&gt;Benefit Card&lt;/label&gt;
      &lt;/clr-input-container&gt;
      &lt;img id=&quot;benefitCardImg&quot; [src]=&quot;agency.benefitCardPhotoUrl&quot; (error)=&quot;setDefaultPic($event)&quot; width=&quot;300&quot;
           (click)=&quot;selectImage2.click()&quot;/&gt;
      &lt;input id=&quot;inputBcImg&quot; type=&quot;file&quot; accept=&quot;.png,.jpg&quot; #selectImage2 (change)=&quot;uploadBc($event)&quot;&gt;
      &lt;clr-input-container formArrayName=&quot;contactsForm&quot;&gt;
        &lt;label&gt;Contact Name&lt;/label&gt;
        &lt;input clrInput type=&quot;text&quot; formControlName=&quot;contact.name&quot;/&gt;
      &lt;/clr-input-container&gt;
      &lt;div&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;button class=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;pre&gt;{{contactsForm.value | json}}&lt;/pre&gt;
  &lt;!--&lt;div class=&quot;clr-row&quot;&gt;--&gt;
  &lt;!--  &lt;div class=&quot;clr-col-6&quot;&gt;--&gt;
  &lt;!--    &lt;div clrForm [formGroup]=&quot;contactsForm&quot;&gt;--&gt;
  &lt;!--      &lt;div clr-form-control&gt;--&gt;
  &lt;!--        &lt;label&gt;&lt;h3&gt;Contacts&lt;/h3&gt;&lt;/label&gt;--&gt;
  &lt;!--        &lt;clr-input-container&gt;--&gt;
  &lt;!--          &lt;label&gt;Contact ID&lt;/label&gt;--&gt;
  &lt;!--          &lt;input clrInput type=&quot;text&quot; formControlName=&quot;contactId&quot;/&gt;--&gt;
  &lt;!--        &lt;/clr-input-container&gt;--&gt;
  &lt;!--        &lt;clr-input-container&gt;--&gt;
  &lt;!--          &lt;label&gt;Contact Name&lt;/label&gt;--&gt;
  &lt;!--          &lt;input clrInput type=&quot;text&quot; formControlName=&quot;name&quot;/&gt;--&gt;
  &lt;!--        &lt;/clr-input-container&gt;--&gt;
  &lt;!--        &lt;clr-input-container&gt;--&gt;
  &lt;!--          &lt;label&gt;Contact Email&lt;/label&gt;--&gt;
  &lt;!--          &lt;input clrInput type=&quot;email&quot; formControlName=&quot;email&quot;/&gt;--&gt;
  &lt;!--        &lt;/clr-input-container&gt;--&gt;
  &lt;!--        &lt;clr-input-container&gt;--&gt;
  &lt;!--          &lt;label&gt;Contact Phone&lt;/label&gt;--&gt;
  &lt;!--          &lt;input clrInput type=&quot;phone&quot; formControlName=&quot;phone&quot;/&gt;--&gt;
  &lt;!--        &lt;/clr-input-container&gt;--&gt;
  &lt;!--        &lt;br&gt;--&gt;
  &lt;!--        &lt;button type=&quot;button&quot;--&gt;
  &lt;!--                class=&quot;btn btn-sm btn-secondary&quot; (click)=&quot;editContactInfo()&quot;&gt;Submit--&gt;
  &lt;!--        &lt;/button&gt;--&gt;
  &lt;!--      &lt;/div&gt;--&gt;
  &lt;!--    &lt;/div&gt;--&gt;
  &lt;!--  &lt;/div&gt;--&gt;
    &lt;div class=&quot;clr-col-6&quot;&gt;
      &lt;div clrForm [formGroup]=&quot;apiForm&quot;&gt;
        &lt;div clr-form-control&gt;
          &lt;label&gt;&lt;h3&gt;Api Info&lt;/h3&gt;&lt;/label&gt;
          &lt;clr-input-container&gt;
            &lt;label&gt;Api ID&lt;/label&gt;
            &lt;input clrInput type=&quot;text&quot; formControlName=&quot;apiId&quot;/&gt;
          &lt;/clr-input-container&gt;
          &lt;clr-input-container&gt;
            &lt;label&gt;Api Secret&lt;/label&gt;
            &lt;input clrInput type=&quot;text&quot; formControlName=&quot;apiSecret&quot;/&gt;
          &lt;/clr-input-container&gt;
          &lt;clr-input-container&gt;
            &lt;label&gt;App Key&lt;/label&gt;
            &lt;input clrInput type=&quot;text&quot; formControlName=&quot;appKey&quot;/&gt;
          &lt;/clr-input-container&gt;
          &lt;clr-input-container&gt;
            &lt;label&gt;App Name&lt;/label&gt;
            &lt;input clrInput type=&quot;text&quot; formControlName=&quot;appName&quot;/&gt;
          &lt;/clr-input-container&gt;
          &lt;clr-input-container&gt;
            &lt;label&gt;Host Address&lt;/label&gt;
            &lt;input clrInput type=&quot;url&quot; formControlName=&quot;hostAddress&quot;/&gt;
          &lt;/clr-input-container&gt;
          &lt;br&gt;
          &lt;button type=&quot;button&quot;
                  class=&quot;btn btn-sm btn-secondary&quot; (click)=&quot;editApiInfo()&quot;&gt;Submit
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;!--&lt;/div&gt;--&gt;
  
  
  </code></pre>
  <p>I'm getting an error after it compiles as follows:
  vendor.js:124554 ERROR Error: formArrayName must be used with a parent formGroup directive.  You'll want to add a formGroup
  directive and pass it an existing FormGroup instance (you can create one in your class).</p>
  <pre><code>    Example:
  
      
  &lt;div [formGroup]=&quot;myGroup&quot;&gt;
    &lt;div formArrayName=&quot;cities&quot;&gt;
      &lt;div *ngFor=&quot;let city of cityArray.controls; index as i&quot;&gt;
        &lt;input [formControlName]=&quot;i&quot;&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  In your class:
  
  this.cityArray = new FormArray([new FormControl('SF')]);
  this.myGroup = new FormGroup({
    cities: this.cityArray
  });
  </code></pre>
  <p>this is truncated...I tried adding a formGroup, which I prefer doing, but then it's not letting use push, as it can only be used as an array. I don't know how to change the code so it will let me use push.</p>