反应形式重复代码

Question

我正在使用响应式表单，我有两种表单登录和注册。 注册：

<div class="registration_wrap">
   <div class="registration">
      <form [formGroup]="form"
            novalidate>

         <h2>Registration</h2>

         <mat-form-field class="example-full-width">
            <input matInput
                   placeholder="Username"
                   name="username"
                   [formControlName]="'username'">

            <mat-error *ngIf="form.controls['username'].invalid">{{ 
       getErrorMessage('username') }}</mat-error>
         </mat-form-field>

         <mat-form-field class="example-full-width">
            <input matInput
                   placeholder="Email"
                   name="email"
                   [formControlName]="'email'">
            <mat-error *ngIf="form.controls['email'].invalid">{{ 
        getErrorMessage('email') }}</mat-error>
         </mat-form-field>

         <mat-form-field class="example-full-width">
            <input matInput
                   placeholder="Enter your password"
                   [type]="hide ? 'password' : 'text'"
                   name="password"
                   [formControlName]="'password'">
            <mat-icon matSuffix
                      (click)="hide = !hide"
                      class="eye">
               {{hide ? 'visibility' : 'visibility_off'}}
            </mat-icon>
            <mat-error *ngIf="form.controls['password'].invalid">{{ 
      getErrorMessage('password') }}</mat-error>
         </mat-form-field>

         <ng2-password-strength-bar
                 [passwordToCheck]="form.controls['password'].value"
                 [barLabel]="barLabel"
                 [barColors]="myColors">
         </ng2-password-strength-bar>

         <mat-form-field class="example-full-width">
            <input matInput
                   placeholder="Duplicate password"
                   [type]="hide1 ? 'password' : 'text'"
                   name="duplicate"
                   [formControlName]="'duplicate'">
            <mat-icon matSuffix
                      (click)="hide1 = !hide1"
                      class="eye">
               {{hide1 ? 'visibility' : 'visibility_off'}}
            </mat-icon>
            <mat-error *ngIf="form.controls['duplicate'].invalid">{{ 
    getErrorMessage('duplicate') }}</mat-error>
         </mat-form-field>

         <mat-checkbox
                 [formControlName]="'checkbox'"
         >Check me!
         </mat-checkbox>

         <div class="but_wrap">
            <button mat-fab color="primary"
                    (click)="onSubmit(form)"
                    [disabled]="form.invalid">
               <mat-icon>done</mat-icon>
            </button>
            <button mat-fab color="accent"
                    [routerLink]="'/login'">
               <mat-icon>reply</mat-icon>
            </button>
         </div>
         <!--<p>Form value: {{ form.value | json }}</p>-->
         <!--<p>Form status: {{ form.status | json }}</p>-->
      </form>
   </div>
</div>

登录：

 <div class="login_wrap">
  <div class="login">
    <form [formGroup]="form"
          novalidate>

      <h2>Login</h2>

      <mat-form-field class="example-full-width">
        <input matInput
               placeholder="Username"
               name="username"
               [formControlName]="'username'">
        <mat-error *ngIf="form.controls['username'].invalid">{{ 
    getErrorMessage('username') }}</mat-error>
      </mat-form-field>

      <mat-form-field class="example-full-width">
        <input matInput
               placeholder="Enter your password"
               [type]="hide ? 'password' : 'text'"
               name="password"
               [formControlName]="'password'">
        <mat-icon matSuffix
                  (click)="hide = !hide"
                  class="eye">
          {{hide ? 'visibility' : 'visibility_off'}}
        </mat-icon>
        <mat-error *ngIf="form.controls['password'].invalid">{{ 
    getErrorMessage('password') }}</mat-error>
      </mat-form-field>

      <div class="but_wrap">
        <button mat-fab color="primary"
                (click)="onSubmit(form)"
                [disabled]="form.invalid">
          <mat-icon>keyboard_backspace</mat-icon>
        </button>

        <button mat-fab color="accent"
                [routerLink]="'/registration'">
          <mat-icon>group</mat-icon>
        </button>
      </div>

      <!--<p>Form value: {{ form.value | json }}</p>-->
      <!--<p>Form status: {{ form.status | json }}</p>-->
    </form>
  </div>
</div>

如您所见，两种形式都有重复的代码

<mat-form-field class="example-full-width">
        <input matInput
               placeholder="Username"
               name="username"
               [formControlName]="'username'">

        <mat-error *ngIf="form.controls['username'].invalid">{{ 
    getErrorMessage('username') }}</mat-error>
     </mat-form-field>

我想知道我是否可以使用组件或其他东西来放置此代码并将其返回到我的 HTML 模板中。我知道我可以使用简单的组件来做到这一点，但我使用的是响应式表单。还是我应该保持原样？谢谢！

Answer 1

如果你有完全相同的字段，可以很容易地用一个子组件来实现，比如说child-component。如果您有相同的字段，我当然会建议使用单独的组件，毕竟我们都希望尽可能 DRY，对吧？ :)

因此，创建一个子组件，在父模板中添加该标记并将嵌套组（或整个表单）传递给该子组件，将其视为单个组件中的表单。

样品...

父 TS：

myForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.myForm = fb.group({ 
    someField: [''],
    nestedGroup: fb.group({
      someOtherField: ['']
    });
  })
}

父 html：

<form [formGroup]="myForm">
  <input formControlName="someField" >
  <child-component [nestedGroup]="myForm.controls.nestedGroup"></child-component>
</form>

然后只需在您的孩子中使用@Input 来捕获嵌套组，将其标记为表单组，然后在该表单组内插入带有表单控件的字段。

TS：

@Input() nestedGroup: FormGroup;

HTML：

<div [formGroup]="nestedGroup">
  <input formControlName="someOtherField">
</div>

而且由于这个表单组是一个对象并且对象在 JS 中是可变的，所以不需要使用@Output，你的父母会小心孩子身上发生的事情:)