Validation Angular 2：在不绑定ngmodel的情况下向textbox添加所需的验证

要求： 将列表格式化为以逗号分隔的值的文本框。例如，我的组件如下所示

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

    @Component({
        template: `
        <input 
            style="width:400px;"
            (focusout)="update($event.target.value);" 
            value="{{hobbies.join(', ')}}"
            #ipHobbies
        />
        <br>
        {{hobbies}}
        `
    })

    export class TestComponent {
        hobbies: string[] = ["painting", "cooking", "swiming"];
        update(csvHobbies): void {
            csvHobbies = csvHobbies.trim();
            this.hobbies = csvHobbies.split(",")
                .map((item) => { return item.trim() })
                .filter((item) => { return item != "" });
        }
    }

从'@angular/core'导入{Component}；
@组成部分({
模板：`


{{爱好}}
`
})
导出类TestComponent{
爱好：字符串[]=[“绘画”、“烹饪”、“游泳”]；
更新（CSVHOBIES）：无效{
csvHobbies=csvHobbies.trim（）；
this.cabbies=csvHobbies.split（“，”）
.map（（项）=>{return item.trim（）}）
.filter（（项）=>{return item！=“”}）；
}
}

输出：

问题

---

有没有更好的方法来实现这一点？如何向用户添加所需的验证消息

我可以通过将

isEmpty

属性添加到局部变量

#ipHobbies

并在

focusout

事件中更新来添加所需的验证消息

    import { Component } from '@angular/core';
    @Component({
        template: `
        <input 
            (focusout)="ipHobbies.isEmpty=!update($event.target.value);" 
            value="{{hobbies.join(', ')}}"
            #ipHobbies
        />
        <div *ngIf="ipHobbies.isEmpty">
            <span 
                [hidden]="!ipHobbies.empty" 
                class="label label-warning"
            >
            Hobbies are required
            </span>
        </div>    
        `
    })

    export class TestComponent {
        hobbies: string[] = ["painting", "cooking", "swiming"];
        update(csvHobbies): boolean {
            if (csvHobbies == "") {
                this.hobbies = [];
                return false;
            }
            csvHobbies = csvHobbies.trim();
            this.hobbies = csvHobbies.split(",")
                .map((item) => { return item.trim() })
                .filter((item) => { return item != "" });
            return true;
        }
    }

从'@angular/core'导入{Component}；
@组成部分({
模板：`
爱好是必需的
`
})
导出类TestComponent{
爱好：字符串[]=[“绘画”、“烹饪”、“游泳”]；
更新（CSVHOBIES）：布尔值{
如果（csvHobbies==“”）{
这个。爱好=[]；
返回false；
}
csvHobbies=csvHobbies.trim（）；
this.cabbies=csvHobbies.split（“，”）
.map（（项）=>{return item.trim（）}）
.filter（（项）=>{return item！=“”}）；
返回true；
}
}

输出

如果有更好的方法来实现这一点，请更新