Question

我有一个数组，我需要根据其长度重复这些字段，还需要使用数组字段之一来命名字段。我应该怎么做？我的示例代码在这里。请看看Demo

详细信息

  detail:any[]=[
{id:1,value:'RAM',subcatid:1},
{id:2,value:'LCD',subcatid:1},
{id:3,value:'CPU',subcatid:1},
{id:4,value:'GPU',subcatid:1},
{id:5,value:'Camera',subcatid:1},
{id:1,value:'TRAM',subcatid:2},
{id:2,value:'TLCD',subcatid:2},
{id:3,value:'TCPU',subcatid:2},
{id:4,value:'TGPU',subcatid:2},
{id:5,value:'TCamera',subcatid:2}
 ]

字段创建正确，但是我不知道这些字段的名称。我应该如何显示。字段的值也应显示和显示。我该怎么办？

此实码：

TS：

    addProductFG:FormGroup;
  cats:Category[];
  subCats:Category[];
  PD:Productdetail[];
  selectedCat:number;
  valueIngrident=new FormArray([]);
  public loading=false;
  public progress: number=0;
  public messsage:string;

  constructor(private http:HttpClient,private fb:FormBuilder,private productService:ProductinfoService,private catService:CategoryService) { }

  ngOnInit() {
    this.loading=true;
    this.InitialFrom();
    this.GetMainCat();
  }

  public CreateValueFiled(PD:Productdetail[]){
      PD.map(element => {
        this.valueIngrident.push(
          new FormGroup({
            infoId:new FormControl(element.id),
            value:new FormControl('')
          })
        )
      });
  }

  public GetMainCat(){
    this.catService.GetMainCat().subscribe(
      res=>{
        this.cats=res;
        this.loading=false;
      }
    )
  }

  get ValueFormControl(){
      return  this.addProductFG.get('values') as FormArray;
  }

  public InitialFrom():FormGroup{

    this.addProductFG=this.fb.group({
      productTitle:['',Validators.compose([Validators.required])],
      productName:['',Validators.compose([Validators.required])],
      color:['',Validators.compose([Validators.required])],
      productImageName:['',Validators.compose([Validators.required])],
      price:['',Validators.compose([Validators.required])],
      gurantyMonth:['',Validators.compose([Validators.required])],
      gurantyCompanyName:['',Validators.compose([Validators.required])],
      values:this.valueIngrident
    })
    return this.addProductFG;
  }
  public ChangeSubCat(id:number){
    this.loading=true;
      this.catService.GetSubCatByCatId(id).subscribe(
          res=>{
            this.subCats=res;
            this.loading=false;
          }
        )
  }

  public ChangeFormByType(id:number){
    this.loading=true;
      this.productService.GetPCIBySubId(id).subscribe(
        res=>{
          this.PD=res,
          this.CreateValueFiled(this.PD),
          this.loading=false;
        }
      )
  }

和 HTML 代码：

    <div class="form-inline lbin" formArrayName="values">
                <div class="form-inline lbin" *ngFor="let valueCtrl of ValueFormControl.controls; let i=index" [formGroupName]="i">
                    <div  class="form-inline lbin">
                        <label>{{PD.infoNames[i].infoName}}</label> 
                        <input formControlName="value" >
                    </div>
                </div>
            </div>

这是ProductDetail：

export interface Productdetail {
id:number;
catId:number;
infoNames:Detail[];
}

和此详细信息：

export interface Detail {
infoName:string;
}

Answer 1

您输入错误，必须是

<!--is "AddP", not addP-->
<form *ngIf="AddP" [formGroup]="AddP">
  <!--is "values" not valueIng, is formArrayName, not formArray-->
  <div formArrayName="values">
    <div *ngFor="let valueCtrl of ValueFormControl.controls; let i=index" [formGroupName]="i">
      <div  class="form-inline lbin">
          <!--I supouse you wwant to do some like this-->
          <label>{{detail[i].value}}</label>
          <input formControlName="value" >
        </div>
      </div>
  </div>
</form>
{{AddP?.value|json}}

因此，在ngOnInit中，必须将befor调用到CreateValueField

ngOnInit(){
    this.CrateValueFiled();
    this.InitForm();
  }

好吧，一个改善代码的想法。为什么您的函数CreateValueFiled不返回formArray，例如

  public CrateValueFiled(detail) {
    let controls: FormGroup[] = [];
    detail.forEach(el => {
      controls.push(
        new FormGroup({
          id: new FormControl(el.id),
          value: new FormControl('', Validators.compose([Validators.required]))
        })
      )
    })
    return new FormArray(controls)
  }

然后您的NgInit变为

public InitForm(): FormGroup {
    this.AddP = this.fb.group({
      values: this.CrateValueFiled(this.detail)
    });
    // return this.AddP; <--you need'nt return this.AddP
  }

请参阅your forked stackblitz

注意：尝试使用驼峰表示法

Answer 2

而不是遍历表单数组控件，而是遍历数据。

分叉并更新了解决方案here。

组件html

<form [formGroup]="AddP" >
  <div formArrayName="values">
    <div *ngFor="let d of detail; let i=index" [formGroupName]="i">
      <div  class="form-inline lbin">
          <label> {{d.value}}</label>
          <input formControlName="value" >
        </div>
      </div>
  </div>
</form>

用户数组的长度和值就位

2 个答案: