Question

我的网页有布局配置。对于每个控件，我都有标志，只读，强制和隐藏。

我有一个父组件，即layout.component.ts，它进行API调用并从Web API获取布局配置信息。

我试图简化应用程序并删除了API调用。我在Query选择器的帮助下获得控件并动态设置readonly属性，但即使在输入控件上应用required属性后，angular也不显示ng-invalid类。

代码：

layout.component.ts

import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, ContentChild, ContentChildren, forwardRef, Output, Input, EventEmitter } from '@angular/core';


@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.css']
})
export class LayoutComponent {
  htmlElements: Array<HTMLElement> = new Array<HTMLElement>();
  readonly: boolean = false;

  get layoutContainer(): HTMLElement {
    return this.elementRef.nativeElement.querySelector('.layout-conatiner');
  }

  get textControl(): HTMLElement {
    return this.elementRef.nativeElement.querySelector('#myText');
  }

  constructor(private elementRef: ElementRef) {

  }

  setReadonly() {
    this.textControl.setAttribute('required', '');
    this.readonly = true;
  }

  removeReadonly() {
    this.textControl.removeAttribute('required');
    this.readonly = false;
  }
}

layout.component.html

<p>
  layout works!
</p>

<div *ngIf="!readonly">
  <button (click)="setReadonly()">Make textbox Readonly</button>
</div>

<div *ngIf="readonly">
  <button (click)="removeReadonly()">Remove Readonly</button>
</div>


<div class="layout-conatiner">
  <ng-content></ng-content>
</div>

app.component.html

<h1>
  {{title}}
</h1>

<app-layout>
  <input type="text" name=" Add_require_on_the_Fly" id="Input-sample" />
</app-layout>

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app works!';

  ngOnInit() {

  }
}

有人可以建议我如何在动态ng-invalid元素上应用ng-valid属性后获得required / input吗？

Answer 1

你不能直接以角度操纵DOM，这是你可以犯的最大错误之一。例如，根据您的建议，您通过querySelector对DOM进行的任何更改都不会对任何角度绑定产生任何影响，因为angular不知道您正在做什么。

相反，我建议您通过required属性添加[required]="condition"，这将允许角度来获取对该属性所做的任何更改。

此外，如果您必须进行DOM操作，则可以通过Renderer或Renderer2（角度4+）安全地执行此操作。因此，如果使用required绑定的上述方法不适合您。您可以通过渲染器添加required属性。检查文档是否有效。

如果我们操作dom并在input元素上添加required，则Angular不会添加ng-invalid

1 个答案: