在 angular 中删除输入字段中输入的值时隐藏 div

Question

我在输入书号并在字段外单击后填充书名。它工作正常，但是当用户删除已经输入的值时，我想隐藏 div，更改功能似乎不起作用。并且只有当输入字段都有值并且显示标题时，搜索按钮才会被启用。谁能帮帮我。

分量：

export class AppComponent  {
  searchMoviesCtrl = new FormControl();
  filteredMovies: any;
  isLoading = false;
  errorMsg: string;
  title:string;
  showFlag:boolean = false;

  constructor(
    private http: HttpClient
  ) { }

  getBookDetail(){
 
    this.title ="Harry Poter";
    this.showFlag = true;

  }
}

html

<div>
    <form>
    <mat-form-field>
        <input matInput placeholder="BookNumber" #bookNumber (focusout)=getBookDetail()>
      </mat-form-field>
  
    <div *ngIf= showFlag> book {{title}}</div>
</form>
  
<button mat-raised-button color="primary" [disabled] = "!bookNumber.value || !showFlag">Search Book</button>
  </div>

Answer 1

*ngIf 需要引用才能工作，这可能会解决您的问题。

*ngIf="bookNumber.value" 应该只显示 div 如果您在 bookNumber 输入中有输入。

Answer 2

将您的 app.component.ts 更改为：

export class AppComponent  {
  filteredMovies: any;
  isLoading = false;
  errorMsg: string;
  title: string = 'Harry Potter';
  bookForm = this.fb.group({bookNumber: ['', Validators.required]})
  constructor(
    private http: HttpClient,
    private fb: FormBuilder
  ) { }

}

以上使用反应式表单，这是一种管理表单状态的更优雅的方式。您可以设置多个验证器和默认值。

在你的 html 中使用：

<div>
    <form [formGroup]="bookForm">
    <mat-form-field>
        <input matInput placeholder="BookNumber" formControlName="bookNumber">
      </mat-form-field>
    <div *ngIf="bookForm.get('bookNumber')?.value"> book {{title}}</div>
</form>
  
<button mat-raised-button color="primary" [disabled] = "bookForm.invalid">Search Book</button>
  </div>

不要忘记将 FormsModule 和 ReactiveFormsModule 导入您的 app.module.ts。如果您使用的是 angular/ts 的旧版本，请将 div 上的 *ngIf 切换为

bookForm.get('bookNumber') && bookForm.get('bookNumber').value

Answer 3

实际上，有两种方法可以达到您的目的。两种截然不同的DOM效果图，选择真正符合你需求的。

隐藏您的 div（visibility: hidden CSS 属性）但保持 div 在 HTML 页面流中呈现。

component.ts

showFlag = true;

component.html

<div [style.visibility]="!showFlag ? 'hidden' : 'visible'"> book {{title}}</div>

删除您的 div（display: none CSS 属性）并将其从您的 HTML 页面流中删除。

component.ts

showFlag = true;

component.html

<div [style.display]="!showFlag ? 'none' : 'block'"> book {{title}}</div>

启用和禁用您的按钮：

component.ts

disableSubmitButton = true;
bookNumber: string;

checkSubmitButton() {
  if (this.bookNumber.toString().length > 0 && showFlag === false) {
    this.disableSubmitButton = false;
  } else {
    this.disableSubmitButton = true;
  }
}

component.html

<input matInput placeholder="BookNumber" #bookNumber (focusout)=getBookDetail() [(ngModel)]="buttonNumber" 
(ngModelChange)="checkSubmitButton()">

<button mat-raised-button color="primary" [disabled]="disableSubmitButton">Search Book</button>

在 angular 中删除输入字段中输入的值时隐藏 div

hide a div when entered value in input field is deleted in angular

angular

onchange