我应该使用两个组件进行编辑并以角度创建表单吗？

Question

我创建了一个创建表单，用于将数据发布到数据库中。现在我需要制作一个更新表格。我是否需要为更新表单创建单独的组件？或者我应该使用相同的组件进行更新和创建表单吗？

这是我的模板代码，

template: `
    <form novalidate (ngSubmit)="this.createExperience()" [formGroup]="this.formGroup">
         <div formArrayName="dayanddescriptions">
                        <div class="panel panel-default" *ngFor="let dayAndDescription of this.formGroup.controls.dayanddescriptions.controls; let i = index" >           
                            <div class="panel-heading">
                                <span>Day {{i + 1}}</span>
                                <span class="glyphicon glyphicon-remove pull-right" *ngIf="i>0"  
                                (click)="removeDayandDescription(i)">                    
                                </span>
                            </div>          
                            <div class="panel-body" [formGroupName]="i">
                            <!--Day-->
                                <div class="form-group col-xs-4" >
                                    <label for="text">Day</label>
                                    <input  type="text" class="form-control" formControlName="day" [ngModel]="i + 1"  readonly>                    
                                </div>
                            <!--Description-->
                                <div class="form-group col-xs-4">
                                    <label>Description</label>
                                    <input  type="text" class="form-control" formControlName="description">
                                </div>                           
                            </div>
                        </div>
                    </div>
    </form>
   <div class="margin-20">
        <a (click)="addDayandDescription()" style="cursor: default">
        Add another day +
        </a>
    </div>
    <pre> form: {{ this.formGroup.value | json }} </pre>
  `,
here is the component,
ngOnInit() {   
      this.createForm();
  } 
  public buildForm(buildFormObject) {        
     this.formGroup = buildFormObject;        
  }
   initDayandDescription() {       
      return this._formBuilder.group({
          day: ['', Validators.required],
          description: [''],
      });
  }   
   addDayandDescription() {
      const control: FormArray = this.formGroup.get('dayanddescriptions') as FormArray;
      control.push(this.initDayandDescription());
  }
  createForm() {
      this.buildForm(this._formBuilder.group({

          dayanddescriptions: this._formBuilder.array([
              this.initDayandDescription(),
          ]),           
          hashtags: '',           
      }));
  } 

Answer 1

你可以创建一个公共表单组件，接受@Input是一个FormGroup，然后创建编辑和创建表单，设置表单（编辑表单将有值），将表单传递给公共表单组件：

<强>公用

@Component({
  selector: 'tpc-cm-form',
  template: `
   <div [formGroup]="formGroup">
    <input formControlName="example" type="text"> <br>
    <textarea formControlName="sectionContent"></textarea>
   </div>
  `
})
export class CMForm {
  @Input() formGroup: FormGroup;
}

创建

@Component({
  selector: 'tpc-cr-form',
  template: `
   <form [formGroup]="form">
    <tpc-cm-form [formGroup]="form"></tpc-cm-form>
   </form>
  `
})
export class CreateForm {
  form: FormGroup;
  constructor(private fb: FormBuilder) { }
  ngOnInit() {
    this.form = this.fb.group({
      example: '',
      sectionContent: ''
    });
  }
}

修改

@Component({
  selector: 'tpc-ed-form',
  template: `
   <form [formGroup]="form">
    <tpc-cm-form [formGroup]="form"></tpc-cm-form>
   </form>
  `
})
export class EditForm {
  form: FormGroup;
  constructor(private fb: FormBuilder) { }
  ngOnInit() {
    this.form = this.fb.group({
      example: '',
      sectionContent: ''
    });

    // fetch data from API for example
    this.form.patchValue({
      example: 'Simple data',
      sectionContent: 'Content textarea'
    });
  }
}

在线演示：https://plnkr.co/edit/NWgzGdUc9cDkKujPgrl4?p=preview

Answer 2

您可以为两者创建一个通用的表单组件。如果表单的路由器路径为
/ createform （无参数），然后打开用于创建模式的表单。对于编辑案例，我们还将使用路由器参数（ex- / createform / edit ）和借助路由器参数，您可以在编辑模式下更新表单。

获取路由器参数

this.route.paramMap.subscribe(params => {
      console.log(params.get('paramName'));

    });

我为您创建了一个stackblitz