отключить кнопку, если вход пуст

Question

Как отключить кнопку, если вход пуст, и включить ее, когда пользователь начнет вводить данные, я попробовал это:

<input #new_field type="text" autocomplete="off" />
<p-button (onClick)="saveNewField(new_field.value)" [disabled]="new_field.value ==''" label="Save"></p-button>

, а также это:

 <input [(ngModel)]="searchText" size="30" autocomplete="off" />
    <p-button (onClick)="saveNewField(searchText)" [disabled]="!searchText" label="Save"></p-button>

Answer 1

Я какое-то время смотрел на ту же проблему. Наконец-то найди что-нибудь, что сработало для меня. Попробуйте это:

HTML

<form [formGroup]="myForm">
   <input formControlName="searchText" type="text" size= "30" autocomplete="off" id="searchText" required/>
   <p-button (onclick)="saveNewField(searchText)" [disabled]="!searchText.value" label="Save"></p-button>
</form>

TS

export class searchFieldComponent implements OnInit {

    private searchText = string;
    searchText = new FormControl('', Validators.required);

    constructor(private serviceSearchField: SearchFieldService fb: FormBuilder) {
       this.myForm = fb.group({
          searchText: this.searchText
       });
    };

Если это не работает, также создайте модель и вызовите searchText в модели.

Answer 2

Вы можете использовать ngModel для двухстороннего связывания. Нет необходимости вызывать форму. Просто позвоните ниже.

<input  type="text" [(ngModel)]="some"/>
<button [disabled]="!some" >submit</button>

Также объявите переменную some в компоненте, чтобы связать значение.
например: некоторые: любые;

Answer 3

Попробуйте это

<form role="form" #f="ngForm" novalidate>
    <input class="form-input" type="number" [(ngModel)]="new_field" name="new_field" max="10">
    <p-button type="submit" (onClick)="saveNewField(new_field.value)" [disabled]="f.form.invalid">Test</p-button>
</form>

Answer 4

HTML часть

<button type="button" class="btn btn-primary" (click)="doSomething()" [disabled]="!myForm.valid">Click me</button>

TS часть:

ngOnInit(): void {
        this._buildForm();
    }

private _buildForm() {
        this.myForm = this.fb.group({
            someComponent1: [],
            someComponent2: [, [Validators.required]]
        });
    }

ПОЯСНЕНИЯ

Вы должны добавить проверку для ваших компонентов и установить проверку is form validated. В моем примере выше, если поле ввода Компонента 2 пусто, ваша форма будет недействительной, а кнопка отключена.

Answer 5

Используйте ngModel, свяжите значение и используйте, чтобы отключить кнопку. Попробуйте это:

<input type="text" autocomplete="off" [(ngModel)]="searchText"/>

<p-button (onClick)="saveNewField(searchText)" [disabled]="!searchText" label="Save"></p-button>

Файл машинописного текста:

export class AppComponent  {
  searchText: string;

  saveNewField(searchText) {
    console.log("searched Text", searchText);
  }
}