将指定代码封装为Angular响应式表单自定义InputText组件

Got it, let's wrap that email input into a reusable app-input-text component properly. Here's the complete implementation broken down into manageable parts:

We'll add all necessary @Input() properties to make the component flexible for different input types (like email, text, password) and reuse cases:

import { Component, Input } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-input-text',
  templateUrl: './input-text.component.html',
  styleUrls: ['./input-text.component.css'] // Optional, for consistent styling
})
export class InputTextComponent {
  // Label text for the input
  @Input() label: string = '';
  // Form control name to bind with the parent form group
  @Input() controlName: string = '';
  // Input type (defaults to 'text', can be 'email', 'password', etc.)
  @Input() type: string = 'text';
  // Toggle the required asterisk
  @Input() isRequired: boolean = false;
  // Form control instance to pass to the error display component
  @Input() control: FormControl = new FormControl();
}

We'll replicate your original HTML structure but replace hardcoded values with dynamic bindings to our @Input() properties:

<div class="form-group">
  <label class="form-control-label" [for]="controlName">
    {{ label }}:
    <span class="star" *ngIf="isRequired">*</span>
  </label>
  <input 
    class="form-control" 
    [type]="type" 
    [id]="controlName" 
    [formControlName]="controlName"
  />
  <app-show-errors [control]="control"></app-show-errors>
</div>

Quick breakdown of the template: #

• [for] and [id] are bound to controlName to keep the label-input association in sync
• The required asterisk only renders when isRequired is true
• All input attributes are dynamically bound to make the component reusable for any text-based input

Here's how you'd implement the component in a parent form where cliente is your existing FormGroup:

<form [formGroup]="cliente">
  <!-- Email input using our custom component -->
  <app-input-text
    label="EMAIL"
    controlName="email"
    type="email"
    [isRequired]="true"
    [control]="cliente.controls.email"
  ></app-input-text>

  <!-- Reuse it for other inputs too! -->
  <app-input-text
    label="FULL NAME"
    controlName="fullName"
    [isRequired]="true"
    [control]="cliente.controls.fullName"
  ></app-input-text>
</form>

If you want to ensure the component matches your original styling, add this to input-text.component.css:

.form-group {
  margin-bottom: 1.5rem;
}

.star {
  color: #dc3545;
  margin-left: 0.25rem;
}

内容的提问来源于stack exchange，提问作者Elvis Reis