代码之家  ›  专栏  ›  技术社区  ›  physicsboy

是否发送带有格式数组值的输入值?

  •  2
  • physicsboy  · 技术社区  · 7 年前

    input name 保存在同一个对象数据中,但我似乎无法让它显示,更不用说发送其他更新的数据了。。。

    Here is my blitz

    html

    <form [formGroup]="myForm">
        <div formArrayName="companies">
          <!-- I am wanting to update and send the name of the input also... -->
          <input formControlName="name"/>
    
          <div *ngFor="let comp of myForm.get('companies').controls; let i=index">
            <legend><h3>COMPANY {{i+1}}: </h3></legend>
            <div [formGroupName]="i">
              <div formArrayName="projects">
                <div *ngFor="let project of comp.get('projects').controls; let j=index">
                  <legend><h4>PROJECT {{j+1}}</h4></legend>
                  <div [formGroupName]="j">
                    <label>Project Name:</label>
                    <input formControlName="projectName" /><span><button (click)="deleteProject(comp.controls.projects, j)">Delete Project</button></span>
                  </div>
                </div>
                <button (click)="addNewProject(comp.controls.projects)">Add new Project</button>
              </div>
            </div>
          </div>
        </div><br>
        <button (click)="submit(myForm.value)">send</button>
      </form>
    

    .ts

    export class AppComponent {
    
      data = {
        companies: [
          {
            name: "example company",
            projects: [
              {
                projectName: "example project",
              }
            ]
          }
        ]
      }
    
      myForm: FormGroup;
    
      constructor(private fb: FormBuilder) {
        this.myForm = this.fb.group({
          companies: this.fb.array([])
        })
    
        this.setCompanies();
      }
    
      addNewProject(control) {
        control.push(
          this.fb.group({
            projectName: ['']
          }))
      }
    
      deleteProject(control, index) {
        control.removeAt(index)
      }
    
      setCompanies() {
        let control = <FormArray>this.myForm.controls.companies;
        this.data.companies.forEach(x => {
          control.push(this.fb.group({ 
            name: x.name, 
            projects: this.setProjects(x) }))
        })
      }
    
      setProjects(x) {
        let arr = new FormArray([])
        x.projects.forEach(y => {
          arr.push(this.fb.group({ 
            projectName: y.projectName 
          }))
        })
        return arr;
      }
    
      submit(value) {
        console.log(value);
      }
    
    }
    
    1 回复  |  直到 7 年前
        1
  •  2
  •   Marshal    7 年前

    因为你使用的是 controlArray [formGroupName]="i" formControlName="name" 他是个孩子 .

      <legend><h3>COMPANY {{i+1}}: </h3></legend>
            <div [formGroupName]="i">
                  <input formControlName="name"/>
    
    推荐文章