0

我想使用 Renderer2 将属性“必需”动态放在输入文本字段上。

添加了属性，但字段为空时字段不会变为无效。

我尝试了上面列出的不同方法，但没有任何效果：

this.renderer.setAttribute(elementRef.nativeElement, 'required', 'true');   
this.renderer.setAttribute(elementRef.nativeElement, 'required', '');  
this.renderer.setAttribute(elementRef.nativeElement, 'ng-reflect-required', 'true');

我该怎么做？

不要告诉我使用 [required]="condition"，我知道，我想知道 Renderer2 或 ElementRef 上的其他东西是否有办法做到这一点。

谢谢。

这是我的.html。我希望当我在其中一个下拉列表中选择“其他”选项时，相应的“其他字段”被启用并成为强制性的，因此如果它为空则设置为无效。

           <tr>
              <td>
                <p-dropdown [options]="options" [(ngModel)]="field1" 
                  optionLabel="label" required="true" 
                  (onChange)="selectOnChange($event, 'field1Other')"></p-dropdown>
              </td>
              <td><input type="text" class="form-control" [(ngModel)]="field1Other" 
                disabled id="field1Other" #other>
              </td>
          </tr>
           <tr>
              <td>
                <p-dropdown [options]="options" [(ngModel)]="field2" 
                  optionLabel="label" required="true" 
                  (onChange)="selectOnChange($event, 'field1Other')"></p-dropdown>
              </td>
              <td><input type="text" class="form-control" [(ngModel)]="field2Other" 
                disabled id="field2Other" #other>
              </td>
          </tr>
           <tr>
              <td>
                <p-dropdown [options]="options" [(ngModel)]="field3" 
                  optionLabel="label" required="true" 
                  (onChange)="selectOnChange($event, 'field3Other')"></p-dropdown>
              </td>
              <td><input type="text" class="form-control" [(ngModel)]="field3Other" 
                disabled id="field3Other" #other>
              </td>
          </tr>
etc.

在我的 .ts 中，我正确启用了“其他字段”，但我无法将其设置为强制性。我以为我可以用 Renderer2 来做到这一点，但它不起作用，因为即使设置了“必需”属性，即使该字段为空，该字段的状态仍保持“有效”。

@ViewChildren("other") otherFields: QueryList<ElementRef>;
.
.
  selectOnChange(event: any, otherField: any) {
    const otherElement = this.otherFields.find(x => x.nativeElement.getAttribute('id') == otherField);
    if (event.value == null || event.value.value != 'other') {
      otherElement.nativeElement.disabled = true; // <-- this works
      this.renderer.setAttribute(otherElement.nativeElement, 'required', 'false');
      elementoAltro.nativeElement.value = '';
    } else {
      elementoAltro.nativeElement.disabled = false; // <-- this works
      this.renderer.setAttribute(otherElement.nativeElement, 'required', 'true');
    }
  }
4

0 回答 0