Angular Form 组件数组

问题描述

我正在尝试做一个子组件反应形式的数组。每次我在子级 (questionForm) 中进行编辑时，它都会在父级 (adminForm) 中更新，我已经尝试这样做了 2 周。所以请如果你能帮助我很感激我留下了一些我一直在工作的相关代码

parent.ts

@extends('layouts.master')
@section('title','Page Content Edit')
@section('page-style')
    <script src="http://editor.unlayer.com/embed.js"></script>
@endsection
@section('content')


<button id="update_html_btn" class="btn btn-primary">Update Page</button>
  {{-- <button id="save_json_btn" class="btn btn-primary">Save JSON</button> --}}
  {{-- <button id="load_json_btn" class="btn btn-primary">Load JSON</button> --}}

<div id="editor-container" style="height: 79vh;">

</div>

@endsection


@section('page-script')
    <script>

    class EmailEditor {
        constructor(id) {
            unlayer.init({
            id: id,displayMode: "web",appearance: {
                theme: 'dark',}
            });
        }

        loadDesign(design) {
            unlayer.loadDesign(design);
        }

        saveDesign(callback) {
            unlayer.saveDesign(callback);
        }
        exportHtml(callback) {
            unlayer.exportHtml(callback);
        }
    }

        const editor = new EmailEditor('editor-container');

        const saveHTMLBtn = document.getElementById('update_html_btn');

        saveHTMLBtn.addEventListener('click',e => {
        editor.exportHtml(
            d => {
                // Ajax

                var body = d.html;

                $.post('{{ route('api.page.content.create') }}',{_token:'{{ csrf_token() }}',page_id: '{{ $content->id }}',title: '{{ $content->title }}',body: body
            },function(data){
                    console.log(data);
                });

              }
            );
        });

    </script>
@endsection

父.html

 this.adminForm=this.fb.group({
      //SurveyName:this.nameForm.getData(),Questions: this.fb.array([
      ])
    });

get questions() {
    return this.adminForm.controls["Questions"] as FormArray;
  }
addQuestion() {
    //this.questions.push();
  }

child.ts

<div *ngFor="let alias of questions.controls; let i=index">
            <app-question></app-question>
</div>
 <a (click)="addQuestion()">Add question</a>

解决方法

当您使用子控件控制 FormGroup 时，有两种方法：

1. 在父级中创建 formGroup 并使用 @Input
传递给子级
2. 在 child 中创建 formGroup 并使用 @Output
传递给 parent

对我来说使用第一种方法更舒服

如果你的父母有

getGroup(){
  return this.fb.group({
      question: [''],type: ['Checkboxes'],required: [false],options: this.fb.array([
        this.fb.control('')
      ])
    });
}
//when add a question,always in parent
addQuestion() {
  this.questions.push(this.getGroup());
}

您的孩子只是拥有

formGroup:FormGroup;
@Input('form') set form(value){
    this.formGroup=value as FormGroup
}

hml 就像另一个 formGroup

   <form [formGroup]="formGroup">
     <input formControlName="question">
     ....
   </form>

并且您在父级中使用：

<div *ngFor="let alias of questions.controls; let i=index">
     <app-question [form]=questions.at(i)></app-question>
</div>