我如何在 if 条件下使用 Angular focusout答案

【问题标题】：how can i use Angular focusout with if condition我如何在 if 条件下使用 Angular focusout
【发布时间】：2018-02-09 15:02:56
【问题描述】：

这是我的输入框

<input 
(keyup.enter)="save()" 
(focusout)="save()" 
class="editinput custom_story_input" 
type="text" 
placeholder="Create a new one"
id="tbtfeild"
value="" [(ngModel)]="childTaskmodel.childtitle"
#childtitle="ngModel"
name="childtitle" />

从上面的输入字段中，我对 enter 没有任何问题，如果该字段为空，则会显示错误消息

关注只有在输入字段中有任何数据时它才应该工作我该怎么做..？

我想要这样的东西：

  <input *ngIf (focusout)="childtitle.val != '' ? save() : '' " >

【问题讨论】：

你可以处理(change)，而不是处理(keyup.enter)和(focusout)。
你能提供任何参考吗，我以前在 javascript 中这样做，但我不知道如何在 Angular 4 中处理
看看this question。将(keyup.enter)="save()" 替换为(change)="save()"。
@ConnorsFan 不会成为你想的地方的痛苦，但变化是绑定到select 属性的事件。你应该改用(input)
@trichetriche - (input) 将等同于 (ngModelChange)。 (change) 是 OP 想要在他的代码中做的事情。见this stackblitz。

标签： javascript html angular validation focusout

【解决方案1】：

你可以这样做：

<input [(ngModel)]="childtitle" (focusout)="childtitle ? save() : null">

测试它：除非你的输入有一个值，否则它不会工作。

编辑说明：

您首先使用 [(ngModel)]="childtitle" 将您的变量绑定到输入：这允许您让 Angular 知道他必须注意该变量的更改。

接下来，使用(focusout)="childtitle ? save() : null" 将一个 HTML 事件绑定到此输入。作为一个值，您编写一个三元运算符：这是if ... else ... 条件的单行符。在那个三元组中，你声明如果这个输入有一个值（这是一个 truthy 值，一个 Javascript 概念，你可以在互联网上找到更多），那么你可以运行这个函数。如果没有，那么您只需运行null，它......什么都不做。

【讨论】：

它就像魔术一样感谢您的帮助。我会在 5 分钟内接受，你能解释一下答案吗？
嗨，对不起，我这个周末没空，我在编辑中解释了我的答案，请随时查看

【解决方案2】：

在您的save() 函数中，检查您的模型childTaskmodel.childtitle。如果为空，请不要继续。如果您希望 keyup.enter 和 focusout 有不同的行为，只需在控制器中创建两个方法。

【讨论】：