在Angular中重用组件

Question

I have 3 types of objects:

A
 - FirstName
 - LastName
B
 - FirstName
 - LastName
 - MiddleName
C
 - FirstName

I need to create a component for creating these objects with a simple form that allows me to fill in the fields and send a request.

For each type, I created a component:

a.component.ts:

@Component({
  selector: 'add-a-type',
  template: `
    <form [formGroup]="aForm">
  <div class="form-group">
    <label for="firstName">First Name</label>
    <input type="text" id="firstName" class="form-control" formControlName="firstName" />
  </div>

  <div class="form-group">
    <label for="lastName">Last Name</label>
    <input type="text" id="lastName" class="form-control" formControlName="lastName" />
  </div>

  <button type="button" class="btn btn-info" (click)="addA()" [disabled]="aForm.invalid">
    Add
  </button>
</form>
  `
})
export class AddAComponent implements OnInit {
  aForm: FormGroup;

  constructor(
  ) { }

  ngOnInit() {
    this.createAForm();
  }

  createAForm(): void {
    this.aForm = new FormGroup({
      firstName: new FormControl('', [Validators.required]),
      lastName: new FormControl(''),
    });
  }

  addA(): void {
    // code
  }
}

For the remaining components, everything will be the same, only the reactive form and the template itself will differ (there will be more or less fields). Tell me how to avoid duplication in this case?

Answer 1

Create a component FormComponent like this:

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="form" (submit)="onSubmit()">
      <div class="form-group" *ngIf="firstName">
        <label for="firstName">First Name</label>
        <input
          type="text"
          id="firstName"
          class="form-control"
          formControlName="firstName"
        />
      </div>

      <div class="form-group" *ngIf="middleName">
        <label for="middleName">Middle Name</label>
        <input
          type="text"
          id="middleName"
          class="form-control"
          formControlName="middleName"
        />
      </div>

      <div class="form-group" *ngIf="lastName">
        <label for="lastName">Last Name</label>
        <input
          type="text"
          id="lastName"
          class="form-control"
          formControlName="lastName"
        />
      </div>

      <button
        type="button"
        class="btn btn-info"
        (click)="submitBtn()"
        [disabled]="form.invalid"
      >
        Add
      </button>
    </form>
  `
})
export class FormComponent implements OnInit {
  @Input() firstName: boolean;
  @Input() middleName: boolean;
  @Input() lastName: boolean;
  @Output() formSubmit = new EventEmitter<any>();

  public form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      firstName: this.firstName ? new FormControl('', [Validators.required]) : undefined,
      middleName: this.middleName ? new FormControl('', [Validators.required]) : undefined,
      lastName: this.lastName ? new FormControl('', [Validators.required]) : undefined
    });
  }

  onSubmit() {
    if(this.form.valid) {
      this.formSubmit.emit(this.form.value);
    }
  }
}

And then use it on your pages. For example if you only want first & last name:

<app-form (formSubmit)="onSubmit($event)" [firstName]="true" [lastName]="true"></app-form>