Невозможно получить доступ к this.text в шаблоне html

Question

Я пытаюсь добавить две кнопки, которые должны отображаться только в том случае, если в поле ввода есть текст, иначе по умолчанию он должен быть скрыт / отключен, но я получаю эту ошибку.

<div class="card card-body">

`<form>`
    `<div class="form-group">`
        `<input type="text" class="form-control" placeholder="Add a Log ...">`
        `<input type="submit" value="Add Log" class="btn btn-light" [disabled]=!this.text>`
        `<button class="btn btn-warning" [hidden]=!this.text>Clear </button>`
    `</div>
`</form>

</div>

Ошибка: Очистить ~~~~~~~~~

         src/app/components/log-form/log-form.component.ts:5:16
         templateUrl: './log-form.component.html',
                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~
       Error occurs in the template of component LogFormComponent.

Answer 1

1. Нет необходимости в кнутах внутри спинок

2. "text" не this.text

   `<form>
       <div class="form-group">
       <input type="text" class="form-control" placeholder="Add a Log ...">
       <input type="submit" value="Add Log" class="btn btn-light" [disabled]="!text">
       <button class="btn btn-warning" [hidden]="!text">Clear </button>
       </div>
   </form>`
   

Answer 2

Вы можете легко реализовать это, используя ngModel, как показано ниже:

mycomp.component. html

<form>
 <div class="form-group">
     <input type="text" class="form-control" name="text" [(ngModel)]="textvalue" placeholder="Add a Log ...">
     <input type="submit" value="Add Log" class="btn btn-light" [disabled]="!textvalue">
     <button class="btn btn-warning" [hidden]="!textvalue">Clear </button>
 </div>
 {{textvalue}}//contains value of your input element.
</form>

mycomp.component.ts

export class MyComponent {
  textvalue:string;
}

Обязательно импортируйте FormsModule в массиве import [] файла app.module.ts, чтобы ngModel работал. Также важен атрибут name для ввода или вы можете использовать formControlName.

Надеюсь, это поможет !!!

Answer 3

Вам не хватает кавычек в вашем шаблоне:

[disabled]="!this.text"