Блог

Я заполняю название книги после ввода номера книги и щелчка за пределами поля . Он работает нормально, но когда пользователь удаляет уже введенное значение, я хочу скрыть этот div, функция on change, похоже, не работает. А также кнопка поиска будет включена только в том случае, если оба поля ввода имеют значение и отображается заголовок. Кто — нибудь может мне помочь.

компонент:

 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>
 

На самом деле, есть два способа достичь своей цели. Из двух отличительных рендерингов DOM выберите то, что действительно соответствует вашим требованиям.

1. Скройте свой div ( visibility: hidden атрибут CSS), но сохраните div визуализацию в потоке HTML-страницы.

компонент.ts

 showFlag = true;
 

component.html

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

2. Удалите свой div ( display: none атрибут CSS) и удалите его из потока вашей HTML-страницы.

компонент.ts

 showFlag = true;
 

component.html

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

Включение и отключение вашей кнопки:

компонент.ts

 disableSubmitButton = true;
bookNumber: string;

checkSubmitButton() {
  if (this.bookNumber.toString().length > 0 amp;amp; 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>
 

Измените свой 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, измените *ngIf в div на

 bookForm.get('bookNumber') amp;amp; bookForm.get('bookNumber').value
 

*ngIf Для работы нужны цитаты, которые могут решить вашу проблему.

*ngIf="bookNumber.value" должен отображать div только в том случае, если у вас есть ввод в поле ввода bookNumber.