@Input 表单子组件

Question

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

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

这是我的代码：

**骆驼-form.component.ts **

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

**骆驼-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)="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;
}

Answer 2

首先，我会将提交按钮移动到 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>

希望对您有所帮助。

@Input 表单子组件

@Input form child component

html

forms

post

typescript

angular