大佬教程收集整理的这篇文章主要介绍了访问 div，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个 angular 项目，我使用 ng-bootstrap 中的 ngb-accordion 来显示一些细节。我的手风琴有反应。我在每个手风琴中都包含了表格。我有一个要求，我想根据里面的表单是有效还是无效，在手风琴面板上方显示一个特定的图标。就像在手风琴内填写表格一样，我想显示一个引导程序刻度图标，如果它是错误的，那么我希望它显示一个十字标记图标。我尝试编写一个 ngIf 指令来检查表单对于包含图标的 div 是否有效。
下面是我尝试为一个手风琴实现上述功能的代码
HTML 文件
<@R_419_6882@>
</@R_419_6882@>
<body>
<div>
<div *ngIf="form1.invalID">
<svg xmlns="http://www.w3.org/2000/svg" wIDth="16" height="16" fill="currentcolor" class="bi bi-x-circle" vIEwBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
style="color: red;"/>
</svg>
</div>
<div>
<ngb-accordion #acc="ngBACcordion">
<ngb-panel ID="toggle-1" title="PriMary Details" >
<ng-template ngbPanelContent>
<form #form1="ngForm" style="padding-left:20px;">
<div class="form-group">
<label for="name" class="control-label">First name<sup style="color: red;Font-size:medium;">*</sup></label>
<input type="text" ngModel name="Firstname" class="form-control" ID="Firstname">
</div>
<div class="form-group">
<label for="name" class="control-label">last name<sup style="color: red;Font-size:medium;">*</sup></label>
<input type="text" name="Lastname" class="form-control" ID="Lastname">
</div>
<div class="form-group">
<label for="name" class="control-label">Organization<sup style="color: red;Font-size:medium;">*</sup></label>
<input type="text" name="name" class="form-control" ID="name">
</div>
</form>
</ng-template>
</ngb-panel>
</ngb-accordion>
</div>
</div>
<br>
<ngb-accordion #acc="ngBACcordion">
<ngb-panel ID="toggle-2" title="Secondary Details">
<ng-template ngbPanelContent>
<form #form2="ngForm" style="padding-left:20px;">
<div class="form-group">
<label for="name" class="control-label">Address<sup style="color: red;Font-size:medium;">*</sup></label>
<input type="text" name="Address" class="form-control" ID="name">
</div>
<div class="form-group">
<label for="dropdown-test" class="control-label">City<sup style="color: red;Font-size:medium;">*</sup></label>
<SELEct class="form-control" name="dropdown-test">
<option>SELEct an option</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
<option>option5</option>
</SELEct>
</div>
</form>
</ng-template>
</ngb-panel>
</ngb-accordion>
<br>
<ngb-accordion #acc="ngBACcordion">
<ngb-panel ID="toggle-3" title="More Details">
<ng-template ngbPanelContent>
<form #form3="ngForm" style="padding-left:20px;">
<div class="form-group">
<label for="name" class="control-label">Email<sup style="color: red;Font-size:medium;">*</sup></label>
<input type="text" name="Email" class="form-control" ID="name">
</div>
<div class="form-group">
<label for="name" class="control-label">Phone<sup style="color: red;Font-size:medium;">*</sup></label>
<input type="number" name="Phone" class="form-control" ID="name">
</div>
</form>
</ng-template>
</ngb-panel>
</ngb-accordion>
</body>
CSS 文件
input[type="text"],SELEct.form-control{
BACkground: transparent;
border: none;
border-bottom: 1px solID #000000;
-webkit-Box-shadow: none;
Box-shadow: none;
border-radius: 0;
}
input[type="number"],SELEct.form-control{
BACkground: transparent;
border: none;
border-bottom: 1px solID #000000;
-webkit-Box-shadow: none;
Box-shadow: none;
border-radius: 0;
}
input[type="text"]:focus,SELEct.form-control:focus {
-webkit-Box-shadow: none;
Box-shadow: none;
border-color:rgb(31,14,187);
}
input[type="number"]:focus,SELEct.form-control:focus {
-webkit-Box-shadow: none;
Box-shadow: none;
border-color:darkred;
}
在 <div *ngIf="form1.invalID"> 行，它向我抛出一个错误，指出 src/app/collapsedemo/collapsedemo.component.HTML:9:21 - 错误 TS2339：属性 'form1' 不存在 在“CollapsedemoComponent”类型上。
请告诉我我做错了什么。未填写表单时，我将在没有 ngIf 指令的情况下包含工作应用的图片。
如果有的话，还请给我建议一个替代方案，我可以在标题之前在 acoordion 面板本身中显示这些图标，例如在上图中的“主要详细信息”标题之前而不是在 ngb 面板上方.最终目标是在填写表单详细信息时显示绿色勾号，未填写时在手风琴内显示一个叉号。
该表单在此位置不可用，因为它位于嵌套结构的更深处，而您位于嵌套结构之外。
您可以使用 ViewChild 指令和方法实现您想要的。我会告诉你怎么做。
第一步
在 TS 文件中获取表单的 ViewChild。
@ViewChild('form1') myForm: NgForm | undefined;
第二步
编写一个方法，您可以使用该方法获取视图子项的状态。
注意！如果你不等待，你会遇到ExpressionChangedAfterItHasBeencheckedError。这是因为表单的状态在开始时是 undefined，当它变为 true 时，其余的 HTML 并没有最终由 Angular 呈现。所以我想出了一种方法来处理这种竞争条件。
// shows whether the view is rendered entirely
private viewRendered = false;
// returns the current state of your form1
myFormIsInvalid(): Boolean {
// only return the actual state,when the view is rendered entirely
if (this.viewRendered) {
return !(this.myForm && this.myForm.valid);
}
return false;
}
然后我们需要在 ngOnInit() 中设置一点超时，以便在应该加载整个表单时将您的方法设置为空闲。
ngOnInit(): void {
// after 250ms set the method myFormIsValid() free to return the actual value
setTimeout(() => {
this.viewRendered = true;
},250);
}
第三步
In your HTML: Use the method here to get the state of the form
<div *ngIf="myFormIsInvalid()">
以上是大佬教程为你收集整理的访问 div全部内容，希望文章能够帮你解决访问 div所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。