Angular doesn't add ng-invalid when I add required on input element by Renderer2

Question

I want to put the attribute "required" dynamically on an input text field using Renderer2.

The attribute is added, but the field doesn't turn to invalid when the field is empty.

I tried different ways that I list above, but nothing works:

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

How can I do it?

Don't tell me to use [required]="condition", I know, I want to know if there is a way to do this by Renderer2 or something else on ElementRef.

Thanks.

---

This is my .html. I want that when I select the "other" option in one of the dropdown, the corresponding "other field" is enabled and becomes mandatory and therefore set as invalid if it is empty.

           <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.

In my .ts I correctly enable the "other field", but I can't set it mandatory. I thought I could do it with Renderer2, but it doesn't work, because, even if the "required" attribute is set, the state of the field remains "is-valid" even when the field is empty.

@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');
    }
  }