在 Angular 7 中，如何根据是创建还是更新更改我的表单提交按钮文本？

Question

我正在使用 Angular 7。我有这个组件 HTML 用于添加一个简单的产品对象 ...

 <form (ngSubmit)="onSubmit()">

    <div class="form-group">
        <label class="col-xs-4 control-label" for="">Product name: </label>
        <div class="col-xs-8">
            <input type="text" style="width: 300px" class="form-control" required
                [(ngModel)]="product.name" name="productName">
        </div>
        <div>
        <input type="submit" value="Create" />
        </div>
    </div>
</form>

如果我们正在执行更新，我会重新使用该表格。如果有产品正在更新，我想将提交按钮文本更改为 "Update"。我想我可以使用产品的 ID 检查（检查它是否不为空），但我不知道如何更改按钮文本。这是我到目前为止的全部...

<input type="submit" value="{[product.id != null ? 'Update' : 'Create']}" />

但这只是打印条件。

Answer 1

您需要将您的值更改为插值。

<input type="submit" [value]="product.id !== null ? 'Update' : 'Create'" />

您也可以在按钮中完成...

<button type="submit">{{ product.id !== null ? 'Update' : 'Create' }} </button>

在 Angular 7 中，如何根据是创建还是更新更改我的表单提交按钮文本？

In Angular 7, how do I change my form submit button text based on whether its a create or update?

forms

button

angular

angular7