如何处理具有不同表单控件名称的可选输入答案

【问题标题】：how to handle optional input with different formcontrol names如何处理具有不同表单控件名称的可选输入
【发布时间】：2021-03-31 12:20:54
【问题描述】：

我有 2 个单选按钮和输入例如，单选按钮是 CNIC 和 Passport。当我单击 CNIC 时，会显示 cnic 输入，并且在护照输入上将显示基于 *ngIf。 问题是：点击提交表单时显示无效，因为所需的验证与两个输入都绑定

TS：

Cnic: ['',[Validators.required]],
    Passport : ['',[Validators.required]],

HTML：

<div class="row left-div-padding">
          <div class="form-check">
          <input class="form-check-input" type="radio" name="radio1" checked  vlaue = "cnic" (click) ="radioChange('cnic')">
          <label class="form-check-label">CNIC</label>
        </div>
        <div class="form-check left-div-megin">
          <input class="form-check-input" type="radio" name="radio1" value="passport" (click) ="radioChange('passport')">
          <label class="form-check-label" >Passport</label>
        </div>
      </div>
          <input type="text" class="form-control" name= "cnic"placeholder="Cnic" mask = '00000-0000000-0' *ngIf ="selectRadio" 
          formControlName="Cnic" [ngClass]="{'is-invalid': displayMessage.Cnic }">
        <span class="invalid-feedback">
            {{displayMessage.Cnic}}
        </span>
          <input type="text" class="form-control" name="pasport" placeholder="Passport" mask = '00-0000-000'*ngIf ="!selectRadio"
            formControlName="Passport" [ngClass]="{'is-invalid': displayMessage.Passport }">
          <span class="invalid-feedback">
            {{displayMessage.Passport}}
          </span>
      </div>

【问题讨论】：

标签： angular validation input

【解决方案1】：

对于单选按钮，您可以使用一个FormControl 并赋予它们相同的name 属性。检查this，一个可以在您的用例中有效的示例代码

【讨论】：