@Input子组件

Question

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

当代码在同一个.ts中时，后端、表单和方法工作得很好。我在使用Angular11.2.2 11.2.2

这是我的代码：

**骆驼-形式.组件.**

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

首先，我会将submit按钮移动到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;
}