当我通过 Renderer2

编程问答 2022-05-28

问题描述

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

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

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

this.renderer.setAttribute(elementRef.nativeElement,'required','true');   
this.renderer.setAttribute(elementRef.nativeElement,'');  
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 做到这一点，但它不起作用，因为即使设置了“required”属性，即使该字段为空，该字段的状态也会保持“is-valid”。

@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,'false');
      elementoAltro.nativeElement.value = '';
    } else {
      elementoAltro.nativeElement.disabled = false; // <-- this works
      this.renderer.setAttribute(otherElement.nativeElement,'true');
    }
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularangular-renderer2requiredrequiredrequired