Angular表单如何添加前后缀，以及如何动态切换表单

需求描述：写一个表单，单位为 m 或者cm

问题分析：1.需要在表单中添加固定后缀单位 2.动态切换表单

首先看第一个问题，前后缀，这个跨域使用ant desgin中的<nz-input-group>来解决

输入框(Input) | NG-ZORRO

添加属性

[nzSuffix]

带有后缀图标的 input，可以与 nzPrefix 配合使用

string | TemplateRef<void>

注：最简单方式是直接写string

[nzSuffix]="'xxxxx'"

或者使用模板变量

这边注意：无论你以哪种方式传入前后缀，最后都是属于图标，并不会与输入框内的字符串拼接，传入数据库时候是不带进去的。

<nz-form-control >

   <nz-input-group [nzPrefix]="startWithPexfix" *ngIf="!isShowPrefixPT">
   
              <input
              maxlength="4"
               /> 
            <ng-template #startWithPexfix >
                 <span class="common-unit">Predfix</span>
            </ng-template>
    </nz-input-group>

     <input
      *ngIf="isShowPrefixPT"
      />  
   </nz-form-control>

第二个问题，动态切换表单，见上图，使用*ngif，设置为一个boolean值，之后在.ts文件中通过函数来控制此布尔值的真假，从而实现动态切换表单。