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

使用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);
  }
}

Answer 2

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]]
        });
    }

EXPLANATION

您应该为组件添加验证并设置检查is form validated。在上面的示例中，如果“组件2”输入字段为空，则您的表单将无效并且按钮将被禁用。

Answer 3

您可以使用 ngModel 进行两种方式的绑定。无需调用表单。只需在下面调用即可。

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

还在组件中声明一些变量以绑定值。
例如：some：any;

Answer 4

填写所有输入，然后将启用按钮

<input type="text" class="form-control" [(ngModel)]="title" />

<input type="text" class="form-control" [(ngModel)]="pitch" />

<input type="text" class="form-control" [(ngModel)]="text" />

<button type="button" class="btn save-btn" [disabled]="!title || !pitch || !text">Save</button>

您有表单标签，然后尝试

<form #experienceForm="ngForm">

    <input type="date" class="form-control" [(ngModel)]="date1" name="date1" required>

    <input type="date" class="form-control" [(ngModel)]="date2" name="date2" required>

    <button type="submit" class="btn success-btn" [disabled]="!experienceForm.form.valid">Save</button>

</form>

Answer 5

尝试一下

<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 6

一段时间以来，我一直在关注同一问题。终于找到对我有用的东西。试试这个：

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。

如果输入为空，则禁用按钮

6 个答案:

EXPLANATION