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

Question

我有 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>

标签： angularvalidationinput

Answer 1

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