如何解决在此FormArray以我的反应形式更改后，为什么从JSON文件中检索对象时会收到此错误消息？
我正在使用反应式表单并引入 FormArray （因为存在将一个字段动态创建为多个字段的情况），因此我正在研究Angular项目。
基本上到定义我的HTML代码的表单中，我都有这样的东西：
<div class="col-10">
<ng-container *ngFor="let commessa of commessaList.controls; index as idx">
<div class="row">
<div class="col-sm-8">
<input type="text" [ngClass]="{'error':commessa.invalid && commessa.touched}"
[formControlName]="idx"
class="form-control" id="commessa">
</div>
<div class="col-sm-2">
<button type="button" *ngIf="idx===0" (click)="addCommessaField()" class="btn btn-success"
[ngClass]="'pad'"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>
<button (click)="deleteCommessaField(idx)" *ngIf="idx!==0" class="btn btn-danger">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</div>
</div>
</ng-container>
</div>
</div>
此部分用于定义表单的突出显示部分（我可以在其中添加多个“ Commessa”字段：
然后在我的TypeScript代码中定义了我用来定义表单字段和相关验证规则的 orderForm：FormGroup; 对象，将其设置为 ngOnInit（）方法：
ngOnInit() {
this.orderFormValues = new OrderFormValues();
console.log("orderFormValues VALUES: " + this.orderFormValues.statoOrdine);
this.orderForm = this.fb.group({
idOrdine: [null,[Validators.required]],dataInserimentoOrdine: [new Date(),statoOrdine: [null,[Validators.required,Validators.minLength(5)]],//commessa: [null,commessaList: new FormArray([
new FormControl('',Validators.minLength(5)])
]),CIG: [null,Validators.pattern("^[a-zA-Z0-9]{10}$")]],dataInizioAttivita: [null,dataFineAttivita: [null,referente: [null,ruoloReferente: [null,tipologiaDiPartecipazione: [null,quotaPercentualeDiRTI: [null,[Validators.max(100)]],cliente: [null,vatCliente: [null,clienteFinale: [null,[]],vatClienteFinale: [null,tipologiaContratto: [null,importoContratto: [null,linkContratto: [null,dataSottoscrizioneContratto: [null,nomeSocieta: [null,vatSocieta: [null,buName: [null,presenzaAQ: [false,linkIdentificativoAQ: [null,accordoQuadro: [null,residuoAccordoQuadro: [null,compagineDiAQ: [null,[]]
});
this.ordeRSService.getAllOrders().then(orders => {
this.orders = orders;
console.log("RETRIEVED ORDERS: ",orders);
this.loading = false;
});
.........................................................................................
.........................................................................................
.........................................................................................
}
您可以在 FormGroup 定义中看到，与多个“ Commessa”字段相关的部分通过以下方式定义为 FormArray ：
commessaList: new FormArray([
new FormControl('',Validators.minLength(5)])
]),为完整性起见，我补充说，然后在我的TypeScript代码中，我还具有这两种方法，用于将用户插入的值插入此 FormArray 的多个 Commessa 字段中对象：
addCommessaField() {
this.commessaList.push(new FormControl('',Validators.minLength(5)]));
}
deleteCommessaField(index: number) {
if (this.commessaList.length !== 1) {
this.commessaList.removeAt(index);
}
console.log(this.commessaList.length);
}
正如您在我的 ngOnInit（）方法中的上一代码段中所看到的，我也正在执行对 OrderService 对象的调用：
this.ordeRSService.getAllOrders().then(orders => {
this.orders = orders;
console.log("RETRIEVED ORDERS: ",orders);
this.loading = false;
});
此调用只是检索显示在首页中的订单列表（此刻已被模拟为JSON文件），在这里我得到一个奇怪的错误。
我的 getAllOrders（）服务方法的代码就是这样的：
getAllOrders() {
return this.http.get<any>('assets/json_mock/ordini.json')
.toPromise()
.then(res => <Order[]>res.data)
.then(data => { return data; });
}
如您所见，它从此 ordini.json 文件中检索并返回订单。
问题在于，调用 getAllOrders（）服务方法会检索订单列表，但是在Chrome控制台中，我也会收到以下错误消息：
core.js:6228 ERROR Error: Cannot find control with name: '0'
at _throwError (forms.js:3576)
at setUpControl (forms.js:3398)
at FormGroupDirective.addControl (forms.js:7679)
at FormControlName._setUpControl (forms.js:8451)
at FormControlName.ngOnChanges (forms.js:8368)
at FormControlName.wrapOnChangesHook_inPrevIoUsChangesstorage (core.js:26966)
at callHook (core.js:4730)
at callHooks (core.js:4690)
at executeInitAndCheckHooks (core.js:4630)
at selectIndexInternal (core.js:9748)
奇怪的是，发生在我使用以前的 FormArray 实现了多个“ Commessa”字段之后（在我只有一个“ Commessa”输入字段并且没有这个错误之前） 。我怀疑错误可能出在我的原始JSON内容中，但我不明白为什么以及如何解决此问题。
{
"data": [
{
"id": 1,"referente": {
"name": "Mario","surname": "Rossi","complete_name": "Mario Rossi","role": "Operation Manager","avatar": "mario-rossi.jpg"
},"company": {
"name": "TEST S.p.A.","VAT": "IT 03318271214","BU": {
"name": "Digital Solution","code": "DS"
}
},"dettaglio_ordine": {
"data_inserimento": "08/08/2020","commessa": {
"code": "AAA0001"
},"identificativo_contratto_hyperlink": "LINK-ID-CONTRATTO-TEST","tipologia_contratto": "ORDINE","presenza_AQ": true,"identificativo_AQ_hyperlink": "LINK-AQ-TEST","accordo_quadro": 12,"importo_contratto": 122000,"residuo_AQ": 20000,"compagine_di_AQ": "COMPAGINE-DI-AQ-TEST","quota_percentuale_di_RTI": 20,"tipologia_di_partecipazione": "Gara PUBBLICA","cig": "CIG-TEST-1","cliente": "CLIENTE-TEST-1","vat_cliente": "VAT-CLIENTE","cliente_finale": "CLIENTE-FINALE-TEST-1","vat_cliente_finale": "VAT-CLIENTE-FINALE","data_sottoscrizione_contratto": "8/12/2020","data_inizio_attivita": "8/28/2020","data_fine_attivita": "8/31/2020","stato_ordine": "CHIUSO"
}
},{
"id": 2,"company": {
"name": "Blabla S.p.A.","BU": {
"name": "Cyber Security","code": "CS"
}
},"dettaglio_ordine": {
"data_inserimento": "09/08/2020","commessa": {
"code": "AAA0002"
},"presenza_AQ": false,"cig": "CIG-TEST-2","vat_cliente": "VAT CLIENTE TEST","cliente_finale": "CLIENTE-FINALE-TEST-2","vat_cliente_finale": "VAT-CLIENTE-FINALE-TEST",{
"id": 3,"referente": {
"name": "Francesco Nicola","surname": "Romano","complete_name": "Francesco Verdi","avatar": "francesco-romano.jpg"
},"dettaglio_ordine": {
"data_inserimento": "10/08/2020","cig": "CIG-TEST-3","cliente": "CLIENTE-TEST-3","vat_cliente": "XXX123","cliente_finale": "CLIENTE-FINALE-TEST-3","vat_cliente_finale": "YYY321","stato_ordine": "CHIUSO"
}
}
]
}
您可以在此JSON文件中定义的对象中看到， commessa 字段是通过以下方式定义的：
"commessa": {
"code": "AAA0002"
},也许是错误的，或者问题出在其他地方。
解决方法
您缺少html中的 formArrayName div。
确保使用 formArrayName =“ commessaList”
封装HTML<div formArrayName="commessaList">
<div class="form-group row">
<label for="commessa" class="col-sm-2 col-form-label">Commessa</label>
<div class="col-sm-10">
<ng-container *ngFor="let commessa of commessaList.controls; index as idx">
................
................
</ng-container>
</div>
</div>
</div>
您忘记使用吸气剂吗？
get comessaList()
{
return this.orderForm .get("comessaList") as FormArray
}
为避免出现初始错误，可以使用* ngIf
<div *ngIf="orderForm" [formGroup]="orderForm">
....
</div>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
