Question

我们正在调查从angularJS转换为Angular。我现在正在使用角5。

在AngularJS中，我们编写了一个通用验证指令，如下所示：＆＃39; our-validation-message＆＃39;：

<our-control-group label="Our label">
    <input name="fieldC" id="fieldC" ng-model="test.fieldC" 
        class="form-control" ng-required="true"  autocomplete="off"
        ng-minlength="5" ng-maxlength="10" type="text" /> 
    <our-validation-message />
</our-control-group>

程序员就像上面那样粘贴它，它充满了功能。

有兴趣的是，它做了一些没有大量样板代码的事情： a）它显示了该字段的唯一消息。 b）它仅在几种情况下这样做：在该字段上进行了更改尝试或提交了表单，并且该字段出错。

在AngularJS中，它共享了我认为在Angular中无效的范围。只要程序员遵守上面的HTML结构，我也能够对输入元素进行这样的操作，例如将字段边框变为红色。同样按惯例，我们有一个所有程序员都知道的字段叫做invalidSubmitAttempt。当用户按下save但表单无效时，这将在保存方法中变为true（我们的UX人员不喜欢禁用保存并让用户搜索原因的范例）。

对不起，如果这个冗长的解释是太多的介绍。以下是我的问题：

<div class="form-group">
    <label for="heroPower">Hero Power</label>
    <input id="heroPower" name="heroPower" class="form-control"  [(ngModel)]="hero.power" placeholder="Power" required #heroPower="ngModel">

    <our-validation-message [control]="heroPower" [isInvalidFormSubmitted]="isInvalidFormSubmitted"></our-validation-message>
</div>

我能够转换指令。但是，我似乎必须通过我的字段和变量传递无效表单提交。我可以吗： a）让组件知道基于父级，它包含在它监视的字段中以消除这种情况：[control] =＆＃34; heroPower＆＃34; ？ b）让组件访问字段的形式，所以我可以将其设置为像myform.invalidSubmitAttempt = true＆＃39;而不是传入变量。这将消除[isInvalidFormSubmitted] =＆＃34; isInvalidFormSubmitted＆＃34;

我知道这不是很多代码，但我们会尝试消除/自动化我们所能做的一切。

提前致谢！

Answer 1

在模板驾驶表单中，添加带#Ex：inside

的引用

    <form #f="ngForm">
<div class="form-group">
<label for="heroPower">Hero Power</label>
<input id="heroPower" name="heroPower" class="form-control"  
 [(ngModel)]="hero.power" placeholder="Power" required #heroPower="ngModel">

<our-validation-message *ngIf="f.invalid"></our-validation-message>
</div>
</form>

通用验证组件/指令

1 个答案: