gpt4 book ai didi

javascript - ng2 [已禁用] ="!myInput.value"无法正常工作

转载 作者:行者123 更新时间:2023-12-03 05:14:25 24 4
gpt4 key购买 nike

我正在构建一个标准的 angular2 应用程序(更具体地说是一个待办事项应用程序)。我还添加了@Ngrx/store .

第一次加载页面时,该按钮被禁用,但是当我在输入框中输入一些值时,需要启用该按钮,但它保持禁用状态...

app/app.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<h1>Hello {{name}}</h1>
<div>
<add-todo></add-todo>
</div>`,
})
export class AppComponent { name = 'Angular'; }

app/components/add-todo/add-todo.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
moduleId: module.id,
selector: 'add-todo',
template: `
Create new todo
<input #myInput />
<button (click)="addTodo()" [disabled]="!myInput.value">Add</button>`
})
export class AddTodoComponent {
@ViewChild('myInput') input: ElementRef;

constructor() {}

addTodo(): void {
alert(this.input.nativeElement.value);
}
}

最佳答案

来自文档https://angular.io/docs/ts/latest/guide/forms.html使用 ngModel 跟踪表单控件的更改状态和有效性...

更新您的代码以使用 ngModel,它应该按预期工作

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
moduleId: module.id,
selector: 'add-todo',
template: `
Create new todo
<input #myInput [(ngModel)]="inputFieldValue" />
<button (click)="addTodo()" [disabled]="!myInput.value">Add</button>`
})
export class AddTodoComponent {

@ViewChild('myInput') input: ElementRef;
public inputFieldValue:string = '';

constructor() {}

addTodo(): void {
alert(this.input.nativeElement.value);
}
}

关于javascript - ng2 [已禁用] ="!myInput.value"无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41665010/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com