javascript - Angular - 如果表单 block 处于焦点状态，则显示输入

Question

我有一个看起来像这样的 Angular 形式(删除上下文的缩短版本):

<form [formGroup]="myForm">
    Name: <input type="text" formControlName="myName">
    <div>
        Gender: <input type="text" formControlName="myGender">
    </div>
</form>

我想要完成的是，通过单击性别输入字段，将显示 2 个单选按钮，当单击性别表单 block 之外的某个位置时，按钮消失。为此，我在我的组件中添加了一个 bool 变量 ts:

export class MyFormComponent implements OnInit {
  genderFocused: boolean = false;
  constructor(
  ) { }

  ngOnInit() {
  }
}

并尝试了这样的事情:

<form [formGroup]="myForm">
    Name: <input type="text" formControlName="myName">
    <div tabindex="-1" (focusout)="genderFocused = false">
        Gender: <input type="text" formControlName="myGender" (focus)="genderFocused = true">
        <label>Yes<input type="radio"></label>
        <label>No<input type="radio"></label>
    </div>
</form>

然而，只要我点击其中一个单选按钮，它们就会立即消失。我环顾四周，没有发现任何可以帮助我解决这个问题的东西。

我用文本输入字段替换了单选按钮，它的行为方式完全相同。一旦 div 中的输入字段获得焦点，它就会消失，这不是预期的

Answer 1

您可以使用@HostListener 来检查元素是否在外部被单击并为*ngIf 条件设置一个标志:

 @HostListener('document:click', ['$event'])
  clickout(event) {
    if(this.eRef.nativeElement.contains(event.target)) {
      this.clickedOutside = false;
    } else {
      this.clickedOutside = true;
    }
  }

正如这个答案所建议的那样: Detect click outside Angular component