angular - 如何根据强制和可选字段启用或禁用 Angular 2 中的任何按钮

Question

当占位符值为“可选”时，我希望启用我的保存按钮。当值为“强制”时，保存按钮应该被禁用并且只有在我为该字段输入一些值时才启用。

我的模板-

<md-input name="" [placeholder]="isOptional()"></md-input>
<input type="button" disabled="placeholder==='Mandatory'" value="Save">

在我的打字稿文件中-

isOptional(){
if (cond1|| cond2){
 return 'Mandatory';
}
else if (cond3||cond4){
return 'Optional';
}

我在我的模板中尝试类似上面的东西，但没有得到正确的输出。知道我哪里出错了吗？

Answer 1

通常你想制作一个表格。你可以这样做：

<form
    (ngSubmit)="sendFunction(anyForm)"
    #anyForm="ngForm"
>
    <input
        type="text"
        placeholder="any placeholder"
        required
    />
    <button type="submit" [disabled]="!anyForm.form.valid">
        Add Todo
    </button>
</form>

Answer 2

尝试以下操作：

<md-input name="" #input [placeholder]="isOptional()"></md-input>
<input type="button" disabled="input.placeholder === 'Mandatory'" value="Save">

Answer 3

在您的组件中：

option: string;

isOptional(){
if (cond1|| cond2){
 this.option = 'Mandatory';
}
else if (cond3||cond4){
this.option = 'Optional';
}

在 html 中：

<input type="button" [disabled]="option==='Mandatory'" value="Save">