Add support for formControlName to the multi-func-input component.

web-app/src/app/routes/passport/lock/lock.component.html

@@ -25,9 +25,7 @@
     <form nz-form [formGroup]="f" (ngSubmit)="submit()" role="form" class="mt-md">
       <nz-form-item>
         <nz-form-control [nzErrorTip]="'validation.password.required' | i18n">
-          <nz-input-group nzSuffixIcon="lock">
-            <input type="text" nz-input formControlName="password" [placeholder]="'app.lock.placeholder' | i18n" />
-          </nz-input-group>
+          <app-multi-func-input prefixIcon="lock" formControlName="password" [placeholder]="'app.lock.placeholder' | i18n" />
         </nz-form-control>
       </nz-form-item>
       <nz-row nzAlign="middle">

web-app/src/app/routes/passport/login/login.component.html

@@ -24,16 +24,23 @@
         <nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>
         <nz-form-item>
           <nz-form-control [nzErrorTip]="'app.login.message-need-identifier' | i18n">
-            <nz-input-group nzSize="large" nzPrefixIcon="user">
-              <input nz-input formControlName="userName" [placeholder]="'app.login.message-need-identifier' | i18n" />
-            </nz-input-group>
+            <app-multi-func-input
+              size="large"
+              prefixIcon="user"
+              formControlName="userName"
+              [placeholder]="'app.login.message-need-identifier' | i18n"
+            />
           </nz-form-control>
         </nz-form-item>
         <nz-form-item>
           <nz-form-control [nzErrorTip]="'app.login.message-need-credential' | i18n">
-            <nz-input-group nzSize="large" nzPrefixIcon="lock">
-              <input nz-input type="password" formControlName="password" [placeholder]="'app.login.message-need-credential' | i18n" />
-            </nz-input-group>
+            <app-multi-func-input
+              size="large"
+              type="password"
+              prefixIcon="lock"
+              formControlName="password"
+              [placeholder]="'app.login.message-need-credential' | i18n"
+            />
           </nz-form-control>
         </nz-form-item>
         <nz-alert

web-app/src/app/shared/components/multi-func-input/multi-func-input.component.html

@@ -19,27 +19,46 @@
 
 <nz-input-group
   [nzSearch]="type === 'search'"
-  [nzPrefixIcon]="type === 'search' ? 'search' : null"
-  [nzSuffix]="inputClearTpl"
+  [nzPrefixIcon]="prefixIcon || (type === 'search' ? 'search' : undefined)"
+  [nzSuffixIcon]="suffixIcon"
+  [nzPrefix]="prefixTpl"
+  [nzSuffix]="suffixTpl"
+  [nzSize]="size"
   [style]="groupStyle"
 >
   <input
     nz-input
-    [id]="id"
+    [id]="id || ''"
     [type]="passwordVisible ? 'text' : type"
-    [name]="name"
-    [style]="inputStyle"
-    [required]="required"
-    [placeholder]="placeholder"
-    [nzSize]="size"
+    [name]="name || ''"
+    [style]="inputStyle || ''"
+    [required]="required || false"
+    [disabled]="disabled || false"
+    [placeholder]="placeholder || ''"
     [(ngModel)]="inputValue"
     (ngModelChange)="onChange()"
   />
 </nz-input-group>
-<ng-template #inputClearTpl>
-  @if (allowClear && inputValue) {
-  <i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" (click)="inputValue = null; onChange()"></i>
-  } @if (type === 'password') {
-  <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
-  }
+
+<ng-template #prefixTpl>
+  <ng-container *ngIf="prefix; else noPrefixContent">
+    <ng-template [ngTemplateOutlet]="prefix"></ng-template>
+  </ng-container>
+  <ng-template #noPrefixContent></ng-template>
+</ng-template>
+
+<ng-template #suffixTpl>
+  <ng-container *ngIf="suffix; else noSuffixContent">
+    <ng-template [ngTemplateOutlet]="suffix"></ng-template>
+  </ng-container>
+  <ng-template #noSuffixContent>
+    @if (type === 'password') {<i
+      nz-icon
+      [nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
+      (click)="passwordVisible = !passwordVisible"
+    ></i>
+    } @if (allowClear && inputValue) {
+    <i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" (click)="inputValue = null; onChange()"></i>
+    }
+  </ng-template>
 </ng-template>

web-app/src/app/shared/components/multi-func-input/multi-func-input.component.less

@@ -1,8 +1,24 @@
 :host {
   ::ng-deep {
-    .ant-input-suffix {
+    .ant-input-prefix, .ant-input-suffix {
       display: flex;
       gap: 4px;
+      * {
+        margin-right: 0!important;
+      }
+    }
+    .ant-input-prefix {
+      margin-right: 0!important;
+      >:last-child {
+        margin-right: 4px!important;
+      }
+    }
+    .ant-input-suffix {
+      flex-direction: row-reverse;
+      margin-left: 0!important;
+      >:last-child {
+        margin-left: 4px!important;
+      }
     }
   }
 }

web-app/src/app/shared/components/multi-func-input/multi-func-input.component.ts

@@ -17,17 +17,29 @@
  * under the License.
  */
 
-import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
+import { Component, OnInit, EventEmitter, Input, Output, ContentChild, TemplateRef, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NzSizeLDSType } from 'ng-zorro-antd/core/types';
 
 @Component({
   selector: 'app-multi-func-input',
   templateUrl: './multi-func-input.component.html',
-  styleUrls: ['./multi-func-input.component.less']
+  styleUrls: ['./multi-func-input.component.less'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MultiFuncInputComponent),
+      multi: true
+    }
+  ]
 })
-export class MultiFuncInputComponent implements OnInit {
+export class MultiFuncInputComponent implements OnInit, ControlValueAccessor {
   constructor() {}
 
+  @ContentChild('prefix', { static: true }) prefix: TemplateRef<any> | undefined;
+  @ContentChild('suffix', { static: true }) suffix: TemplateRef<any> | undefined;
+  @Input() prefixIcon!: string;
+  @Input() suffixIcon!: string;
   @Input() id!: string;
   @Input() value!: any;
   @Input() name!: string;
@@ -40,16 +52,39 @@ export class MultiFuncInputComponent implements OnInit {
   @Input() size: NzSizeLDSType = 'default';
   @Output() readonly valueChange = new EventEmitter<string>();
 
+  disabled: boolean = false;
   inputValue: any | undefined;
   passwordVisible: boolean = false;
 
+  _onChange = (_: any) => {};
+  _onTouched = () => {};
+
   ngOnInit(): void {
     this.inputValue = this.value;
   }
 
   onChange() {
     if (this.inputValue !== this.value) {
       this.valueChange.emit(this.inputValue);
+      this._onChange(this.inputValue);
+    }
+  }
+
+  writeValue(obj: any): void {
+    if (obj !== this.inputValue) {
+      this.inputValue = obj;
     }
   }
+
+  registerOnChange(fn: any): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this._onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
 }