如何解决使用没有 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 举报，一经查实，本站将立刻删除。
