我想在Angular 4或Angular 6中一个输入处于焦点时隐藏一个div

我想在输入处于焦点时隐藏一个div

我试图通过ng类隐藏另一个div，但我真的不知道如何实现它

<div class="form-group col-md-9">
 <input id="notes" placeholder="Notes" formControlName="notes" />
  <div id="another-div">Test div which is hidden when notes input is in focus
 </div>
</div>

当notes输入处于焦点时隐藏的测试div

试着这样做：

<div class="form-group col-md-9">
    <input id="notes" placeholder="Notes" formControlName="notes" (focus)="isDivHidden = true" (blur)="isDivHidden = false"/>
    <div id="another-div" *ngIf="!isDivHidden">Test div which is hidden when notes input is in focus
    </div>
</div>

当notes输入处于焦点时隐藏的测试div

---

您只能通过css1来实现这一点：

input:focus+div{display:none；}

当notes输入处于焦点时隐藏的测试div

您可以检查是否触摸了输入

<div class="form-group col-md-9">
 <input id="notes" placeholder="Notes" formControlName="notes" />
  <div *ngIf="!(notes.dirty || notes.touched)" id="another-div">Test div which is hidden when notes input is in focus
 </div>
</div>

当notes输入处于焦点时隐藏的测试div