Question

我有一个带有3个单选按钮及其相应按钮的反应形式输入文字（也输入3个文字）。如果单击单选按钮，则仅显示其相应的输入文本。我只想输入文本如果我单击其单选按钮。我另外使用自定义验证器必需，所以我不能使用html方式。

我的表单在 component.ts 中初始化如下：

initializeForm() {
    this.formGroupItemSelection = this.fb.group({
          radioBoutton:'refNumber',
          refNumberSelected:[
            null,
            Validators.compose([Validators.required, matchValuesRefNumber(this.listOfItems)])
          ],
          partNumberSelected:[
            null,
            Validators.compose([Validators.required, matchValuesPartNumber(this.listOfItems)])
          ],
          itemNameSelected: [
            null,
            Validators.compose([Validators.required, matchValuesItemName(this.listOfItems)])
          ]
    })
}

我该如何动态地而不是在初始化时要求输入文本？

Validator.ts （带有 matchValuesRefNumber 的示例）：

export const matchValuesRefNumber = (valuesToCheck: any[]): ValidatorFn => {
  return (control: AbstractControl): { [key: string]: boolean } => {
    const controlValue = control.value;

    let res = valuesToCheck.findIndex(el => el.refNumber.input === controlValue);
    console.log(res);
    return res !== -1 ? null : { findmatch: true };
  };
};

component.html

<section class="CreateItem" *ngIf="formGroupItemSelection"> 
<form (ngSubmit)="addItem()" [formGroup]="formGroupItemSelection">

  <input formControlName="radioBoutton" type="radio" value="refNumber" checked> ref number
  <br>

  <input formControlName="radioBoutton" type="radio" value="partNumber"> part number
  <br>

  <input formControlName="radioBoutton" type="radio" value="itemName"> item name
  <br/>
  <br>

  <div *ngIf="formGroupItemSelection.controls.radioBoutton.value==='refNumber'">
    <input list="refNumbers" formControlName="refNumberSelected" type="text" name="refNumberSelected">
    <datalist id="refNumbers">
      <option *ngFor="let ref of listOfItems">{{ref.refNumber.input}}</option>
    </datalist>
  </div>

  <div *ngIf="formGroupItemSelection.controls.radioBoutton.value==='partNumber'">
    <input list="partNumbers" formControlName="partNumberSelected" type="text" name="partNumberSelected">
    <datalist id="partNumbers">
      <option *ngFor="let ref of listOfItems">{{ref.partNumber.input}}</option>
    </datalist>
  </div>

  <div *ngIf="formGroupItemSelection.controls.radioBoutton.value==='itemName'">
    <input list="itemsName" formControlName="itemNameSelected" type="text" name="itemNameSelected">
    <datalist id="itemsName">
      <option *ngFor="let ref of listOfItems">{{ref.itemDesignation.input}}</option>
    </datalist>
  </div>

  <button type="submit" [disabled]="!formGroupItemSelection.valid">Valider</button>


</form>
</section>

Answer 1

我有类似的东西：

在这里，我仅希望将Send Notifications单选按钮设置为text时将Phone作为必填字段。如果将其设置为email，则不需要电话。

我的代码如下：

在构建表单后，立即在ngOnInit中

    this.customerForm.get('notification').valueChanges
                     .subscribe(value => this.setNotification(value));

然后在同一文件中：

setNotification(notifyVia: string): void {
    const phoneControl = this.customerForm.get('phone');
    if (notifyVia === 'text') {
        phoneControl.setValidators(Validators.required);
    } else {
        phoneControl.clearValidators();
    }
    phoneControl.updateValueAndValidity();
}

您可以在此处找到完整的源代码：https://github.com/DeborahK/Angular2-ReactiveForms/tree/master/Demo-Final-Updated

仅在选中单选按钮时才需要输入字段-Angular 4

1 个答案: