Javascript 无法将数据修补到FormArray_Javascript_Html_Angular_Typescript_Formarray

Javascript 无法将数据修补到FormArray

javascript html angular typescript

Javascript 无法将数据修补到FormArray,javascript,html,angular,typescript,formarray,Javascript,Html,Angular,Typescript,Formarray,无法将值修补到FormArrayresultList 任何人都能解释一下，我错过了什么 TS文件： import { Component, OnInit } from '@angular/core'; import { Student } from '../student'; import { FormGroup, FormControl, Validators, FormArray } from '@angular/forms'; @Component({ selector: 'app-

无法将值修补到FormArray

resultList

任何人都能解释一下，我错过了什么

TS文件：

import { Component, OnInit } from '@angular/core';
import { Student } from '../student';
import { FormGroup, FormControl, Validators, FormArray } from '@angular/forms';

@Component({
  selector: 'app-container',
  templateUrl: './container.component.html',
  styleUrls: ['./container.component.css']
})

export class ContainerComponent implements OnInit {

  studList: Student[] = [];
  myform: FormGroup = new FormGroup({
    firstName: new FormControl('', [Validators.required, Validators.minLength(4)]),
    lastName: new FormControl(),
    gender: new FormControl('male'),
    dob: new FormControl(),
    qualification: new FormControl(),
    resultList: new FormArray([])
  });    

  onSave() {
    let stud: Student = new Student();
    stud.firstName = this.myform.get('firstName').value;
    stud.lastName = this.myform.get('lastName').value;
    stud.gender = this.myform.get('gender').value;
    stud.dob = this.myform.get('dob').value;
    stud.qualification = this.myform.get('qualification').value;
    this.studList.push(stud);
    this.myform.controls.resultList.patchValue(this.studList);
    console.log(JSON.stringify(this.studList));
  }

  ngOnInit() {
  }
}

export class Student {
    public firstName: String;
    public lastName: string;
    public gender: string;
    public dob: string;
    public qualification: string;
}

    <div class="container">
        <h3>Striped Rows</h3>
        <table class="table table-striped" formArrayName="resultList">
            <thead>
                <tr>
                    <th>Firstname</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of myform.controls.resultList.controls; let i = index" [formGroupName]="i">
                    <td><p formControlName="firstName"></p></td>
                </tr>
            </tbody>
        </table>
    </div>

[  
   {  
      "firstName":"santosh",
      "lastName":"jadi",
      "gender":"male",
      "dob":"2018-03-31T18:30:00.000Z",
      "qualification":"BE"
   },
   {  
      "firstName":"santosh",
      "lastName":"jadi",
      "gender":"male",
      "dob":"2018-03-31T18:30:00.000Z",
      "qualification":"BE"
   }
]

型号：

import { Component, OnInit } from '@angular/core';
import { Student } from '../student';
import { FormGroup, FormControl, Validators, FormArray } from '@angular/forms';

@Component({
  selector: 'app-container',
  templateUrl: './container.component.html',
  styleUrls: ['./container.component.css']
})

export class ContainerComponent implements OnInit {

  studList: Student[] = [];
  myform: FormGroup = new FormGroup({
    firstName: new FormControl('', [Validators.required, Validators.minLength(4)]),
    lastName: new FormControl(),
    gender: new FormControl('male'),
    dob: new FormControl(),
    qualification: new FormControl(),
    resultList: new FormArray([])
  });    

  onSave() {
    let stud: Student = new Student();
    stud.firstName = this.myform.get('firstName').value;
    stud.lastName = this.myform.get('lastName').value;
    stud.gender = this.myform.get('gender').value;
    stud.dob = this.myform.get('dob').value;
    stud.qualification = this.myform.get('qualification').value;
    this.studList.push(stud);
    this.myform.controls.resultList.patchValue(this.studList);
    console.log(JSON.stringify(this.studList));
  }

  ngOnInit() {
  }
}

export class Student {
    public firstName: String;
    public lastName: string;
    public gender: string;
    public dob: string;
    public qualification: string;
}

    <div class="container">
        <h3>Striped Rows</h3>
        <table class="table table-striped" formArrayName="resultList">
            <thead>
                <tr>
                    <th>Firstname</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of myform.controls.resultList.controls; let i = index" [formGroupName]="i">
                    <td><p formControlName="firstName"></p></td>
                </tr>
            </tbody>
        </table>
    </div>

[  
   {  
      "firstName":"santosh",
      "lastName":"jadi",
      "gender":"male",
      "dob":"2018-03-31T18:30:00.000Z",
      "qualification":"BE"
   },
   {  
      "firstName":"santosh",
      "lastName":"jadi",
      "gender":"male",
      "dob":"2018-03-31T18:30:00.000Z",
      "qualification":"BE"
   }
]

HTML:

import { Component, OnInit } from '@angular/core';
import { Student } from '../student';
import { FormGroup, FormControl, Validators, FormArray } from '@angular/forms';

@Component({
  selector: 'app-container',
  templateUrl: './container.component.html',
  styleUrls: ['./container.component.css']
})

export class ContainerComponent implements OnInit {

  studList: Student[] = [];
  myform: FormGroup = new FormGroup({
    firstName: new FormControl('', [Validators.required, Validators.minLength(4)]),
    lastName: new FormControl(),
    gender: new FormControl('male'),
    dob: new FormControl(),
    qualification: new FormControl(),
    resultList: new FormArray([])
  });    

  onSave() {
    let stud: Student = new Student();
    stud.firstName = this.myform.get('firstName').value;
    stud.lastName = this.myform.get('lastName').value;
    stud.gender = this.myform.get('gender').value;
    stud.dob = this.myform.get('dob').value;
    stud.qualification = this.myform.get('qualification').value;
    this.studList.push(stud);
    this.myform.controls.resultList.patchValue(this.studList);
    console.log(JSON.stringify(this.studList));
  }

  ngOnInit() {
  }
}

export class Student {
    public firstName: String;
    public lastName: string;
    public gender: string;
    public dob: string;
    public qualification: string;
}

    <div class="container">
        <h3>Striped Rows</h3>
        <table class="table table-striped" formArrayName="resultList">
            <thead>
                <tr>
                    <th>Firstname</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of myform.controls.resultList.controls; let i = index" [formGroupName]="i">
                    <td><p formControlName="firstName"></p></td>
                </tr>
            </tbody>
        </table>
    </div>

[  
   {  
      "firstName":"santosh",
      "lastName":"jadi",
      "gender":"male",
      "dob":"2018-03-31T18:30:00.000Z",
      "qualification":"BE"
   },
   {  
      "firstName":"santosh",
      "lastName":"jadi",
      "gender":"male",
      "dob":"2018-03-31T18:30:00.000Z",
      "qualification":"BE"
   }
]

数组不包含

patchValue

方法。您必须迭代控件和

patchValue

每一个都是分开的。

你必须像这样合作，代码取自，你需要做setcontrol，它将通过链接执行或通过链接执行。它使用地址数组的代码是相同的

 this.setAddresses(this.hero.addresses);

  setAddresses(addresses: Address[]) {
    const addressFGs = addresses.map(address => this.fb.group(address));
    const addressFormArray = this.fb.array(addressFGs);
    this.heroForm.setControl('secretLairs', addressFormArray);
  }

根据您的问题，您希望将新的

学生

添加到

结果列表

。首先，您需要知道

FormArray

是一个抽象控件的数组。您可以将添加到仅数组类型的抽象控件而不是其他。要简化任务，请使用

FormBuilder

：

 constructor(private fb: FormBuilder) {}

  createForm() {

    this.myform = this.fb.group({
      firstName: ['', [Validators.required, Validators.minLength(4)]],
      lastName: [],
      gender: ['male'],
      dob: [],
      qualification: [],
      resultList: new FormArray([])
    });
  }

正如您在填写结果列表

FormArray

之前所看到的，它被映射到FormGroup：

onSave() {
    let stud: Student = new Student();
    stud.firstName = 'Hello';
    stud.lastName = 'World';
    stud.qualification = 'SD';
    this.studList.push(stud);

    let studFg = this.fb.group({
      firstName: [stud.firstName, [Validators.required, Validators.minLength(4)]],
      lastName: [stud.lastName],
      gender: [stud.gender],
      dob: [stud.dob],
      qualification: [stud.qualification],
    })
     let formArray = this.myform.controls['resultList'] as FormArray;
    formArray.push(studFg);
    console.log(formArray.value)
  }

 patchValue(value: any[], options: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
    value.forEach((newValue: any, index: number) => {
      if (this.at(index)) {
        this.at(index).patchValue(newValue, {onlySelf: true, emitEvent: options.emitEvent});
      }
    });
    this.updateValueAndValidity(options);
  }

FormBuilder-从用户指定的配置

本质上是句法上的糖分缩短了新的FormGroup（）， 新建FormControl（），以及新建FormArray（）可以建立的样板文件以更大的形式

另外，在绑定到

元素的htmlformControlName中，它不是输入，您不能绑定到非表单元素，如div/p/span：

 <tbody>
                <tr *ngFor="let item of myform.controls.resultList.controls; let i = index" [formGroupName]="i">
                    <td><p formControlName="firstName"></p></td> <==== Wrong element 
                </tr>
</tbody>

因此，它下面的代码将在index=0处对元素进行修补：
this.myform.controls['resultList']的第一个索引值作为FormArray
将替换为：

let stud1 = new Student(); stud1.firstName = 'FirstName'; stud1.lastName = 'LastName'; stud1.qualification = 'FFF'; formArray.patchValue([stud1]);
您的案例不起作用，因为patchValue需要数组中的一些控件。在您的情况下，数组中没有控件。看看源代码

因为在您的场景中，您要将对象修补到formArray，所以您必须首先解析该对象，并在您的app.module.ts中导入ReactiveFormsModule后检查。
我更喜欢使用
FormBuilder
创建表单

export class ComponentName implements OnInit { form: FormGroup; constructor(private fb: FormBuilder){} ngOnInit() { this.buildForm(); } buildForm() { this.form = this.fb.group({ firstName: '', lastName: '', ... resultList: this.fb.array([]) }); } }
我相信studlist将通过API调用作为一个可观察的数组而不是一个静态数组来获得。让我们假设，我们的数据如下

resultModel = { firstName: "John", lastName: "Doe", .... resultList: [ { prop1: value1, prop2: value2, prop3: value3 }, { prop1: value1, prop2: value2, prop3: value3 } ... ] }
一旦数据可用，我们可以按如下方式修补这些值：

patchForm(): void { this.form.patchValue({ firstName: this.model.firstName, lastName: this.model.lastName, ... }); // Provided the FormControlName and Object Property are same // All the FormControls can be patched using JS spread operator as this.form.patchValue({ ...this.model }); // The FormArray can be patched right here, I prefer to do in a separate method this.patchResultList(); } // this method patches FormArray patchResultList() { let control = this.form.get('resultList') as FormArray; // Following is also correct // let control = <FormArray>this.form.controls['resultList']; this.resultModel.resultList.forEach(x=>{ control.push(this.fb.group({ prop1: x.prop1, prop2: x.prop2, prop3: x.prop3, })); }); }

patchForm（）：void{ 这个.form.patchValue({ 名字：this.model.firstName， lastName:this.model.lastName， ... }); //前提是FormControlName和Object属性相同 //所有FormControl都可以使用JS spread操作符作为补丁进行修补这个.form.patchValue({ …这个模型 }); //FormArray可以在这里进行修补，我更喜欢用单独的方法进行修补这个.patchResultList（）； } //这种方法修补了FormArray patchResultList（）{ 让control=this.form.get（'resultList'）作为FormArray； //以下也是正确的 //让control=this.form.controls['resultList']； this.resultModel.resultList.forEach（x=>{ control.push（this.fb.group({ prop1:x.prop1， prop2:x.prop2， prop3:x.prop3， })); }); }
我正在使用
formarray
中的
formgroup
作为：

this.formGroup = new FormGroup({ clientCode: new FormControl('', []), clientName: new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z0-9 _-]{0,50}$/)]), type: new FormControl('', [Validators.required]), description: new FormControl('', []), industry: new FormControl('', []), website: new FormControl('', [Validators.required, Validators.pattern(this.settings.regex.website)]), businessEmail: new FormControl('', [Validators.pattern(this.settings.regex.email)]), clients: this._formBuilder.array([this._formBuilder.group({ contactPerson: new FormControl('', [Validators.required]), contactTitle: new FormControl('', [Validators.required]), phoneNumber: new FormControl('', [Validators.required, Validators.pattern(this.settings.regex.phone)]), emailId: new FormControl('', [Validators.required, Validators.pattern(this.settings.regex.email)]), timeZone: new FormControl('', [Validators.required, Validators.pattern(this.settings.zipCode), Validators.minLength(5), Validators.maxLength(12)]) })]) })
对于面片值，我使用以下方法：

let control = _this.formGroup.get('clients') as FormArray clients.forEach(ele => { control.push(_this._formBuilder.group({ contactPerson: new FormControl(ele.client_name, [Validators.required]), contactTitle: new FormControl(ele.contact_title, [Validators.required]), phoneNumber: new FormControl(ele.phone_number, [Validators.required, Validators.pattern(_this.settings.regex.phone)]), emailId: new FormControl(ele.email_id, [Validators.required, Validators.pattern(_this.settings.regex.email)]), timeZone: new FormControl(ele.timezone, [Validators.required, Validators.pattern(_this.settings.zipCode), Validators.minLength(5), Validators.maxLength(12)]) })) });
使用此方法，我们还可以验证嵌套字段

希望这能有所帮助。
您能用示例解释一下吗example@ritaj，错了。FormArray有方法
patchValue
并检查我的答案，这可能会解决您的问题。这对您有效吗？？？@PranayRana没有。很好的例子。这应该行得通。如果您有时间，请查看：