angular - 使用没有 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, Validators.required],
email: [contact.email, Validators.email],
phone: [contact.phone, Validators.required],
type: this.fb.control("type")
}));
});
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([])})
并在模板中
<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 ERROR 错误：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，因为它只能用作数组。我不知道如何更改代码，所以它会让我使用推送。
解决方案
推荐阅读
- npm - 在生产模式下找不到@nuxt/content 页面
- javascript - Expo监听浏览器关闭
- php - WooCommerce：仅从降低税率的商品中获取订单总额
- ansible - 用 ansible 原始模块修补路由器，但修补后 ansible 没有重新发送
- elasticsearch - ElasticSearch - 按术语和字段优先级查询文档
- c# - 实体框架的更改跟踪在将客户端对象映射到实体后检测小数精度差异，我不希望它
- android - 如何在视图模型中从 DataStore 首选项中获取值，如 Flow
- python - 打印值不适用的列表
- php - 有没有办法用一条 SQL 语句来获取一对多的关系？
- php - 在 WooCommerce 中添加订单号作为自定义订单项元数据