@Input 表单子组件

Question

我正在尝试将负责表单的代码分离到另一个组件中，并使其可重用。 我想我应该以某种方式使用@Input。然后在html中引用它。并将值从它传递给 post 方法。但是我该怎么做呢？

当代码在相同的 .ts 中时，后端、表单和方法可以正常工作。我正在使用 Angular11.2.2

这是我的代码：

**camel-form.component.ts **

camelForm = this.formBuilder.group({
    id: [],
    name: [''],
    age: [],
    guardian: this.formBuilder.group({
      id: [],
      name: [''],
      lastName: [''],
      email: ['']
    })
  });

**camel-form.component.html **

<form [formGroup]="camelForm">
  <!--    part for camel-->
  <h2 class="ml-3">Camel form</h2>
  <div class="form-row ml-3">
    <div class="form-group col-md-2">
      <label  for="id">id </label>
      <input class="form-control" id="id" type="number" formControlName="id">
    </div>
    <div class="form-group col-md-2">
      <label for="name">name </label>
      <input class="form-control" id="name" type="text" formControlName="name">
    </div>
    <div class="form-group col-md-2">
      <label for="age">age </label>
      <input class="form-control" id="age" type="number" formControlName="age">
    </div>
  </div>

  <!--    part for guardian-->
  <h2 class="ml-3">Guardian form</h2>
  <div class="form-row ml-3" formGroupName="guardian">

    <div class="form-group col-md-2">
      <label for="id">id </label>
      <input class="form-control" id="id" type="number" formControlName="id">
    </div>

    <div class="form-group col-md-2">
      <label for="name">name </label>
      <input class="form-control" id="name" type="text" formControlName="name">
    </div>

    <div class="form-group col-md-2">
      <label for="lastName">lastName</label>
      <input class="form-control" id="lastName" type="text" formControlName="lastName">
    </div>

    <div class="form-group col-md-2">
      <label for="email">email</label>
      <input class="form-control" id="email" type="email" formControlName="email">
    </div>
  </div>
</form>

**rest.component.ts **

camel: Camel;

postCamel(): void {
    this.camel = this.----------.value;
    this.apiService.postCamel(this.camel).subscribe();
  }

**rest.component.html **

<app-camel-form></app-camel-form>
<button class="btn-danger ml-3" type="submit" (click)="postCamel()">Submit</button>

Answer 1

首先，我会将提交按钮移动到CamelForm 组件中。

其次，要使表单可重复用于编辑，您需要为数据提供输入，以便可以将其绑定到 FormGroup 实例。示例，省略组件定义：

@Input()
camel: ICamel;

form: FormGroup;

initForm(camel?: ICamel): void {
  this.form = this.formBuilder.group({
    id: [camel ? camel.id : null],
    name: [camel ? camel.name : null],
    age: [],
    guardian: this.formBuilder.group({
      id: [camel ? camel.gaurdian.id : null],
      name: [camel ? camel.gaurdian.name : null],
      lastName: [camel ? camel.gaurdian.lastName : null],
      email: [camel ? camel.gaurdian.email : null]
    });
  }
}

现在您可以通过提供输入或不提供输入来利用任何一种情况下的表单：

<app-camel-form [camel]="camel"></app-camel-instance>

希望对你有所帮助。

Answer 2

您确定要在表单之外创建一个提交按钮吗？如果这是错误的，那么您可以订阅提交事件并从您的组件(submit)="postCamel($event)" 发出它。否则-您希望按钮脱离我建议这样做的形式

<app-camel-form #camelForm [camel]="camelData"></app-camel-form>
<button (click)="postCamel(camelForm.value)"

在形式上

ngOnChanges(changes) { // this method is needed if you want to pass data to the form 
  if(changes.camel) {
    this.camelForm.patchValue(this.camel)
  }
}

get value() {// this will make the form value be accessible from outside of form component
  return this.camelForm.value;
}