Question

我正在构建表单，我的标记一直在重复，所以我很难为我生成它。

这是我的部分

<div class="row fieldset">
    <div class="column column-3">
        <label for="{{params.fieldId}}">
            {{params.labelText}}
        </label>
    </div>
    <div class="column column-5">
        <input type="text" ng-required="{{params.required}}" id="{{params.fieldId}}" name="{{params.fieldId}}" ng-model="params.ngModel" />
        <small class="error" ng-show="????">{{params.validatioMessage}}</small> 
    </div>
    <div class="column column-4" >
        <div class="hint">
            <p>{{params.hintTitle}}</p>
            <p>{{params.hintText}}</p>
        </div>
    </div>
</div>

JSON对象

$scope.paramz = {
    fieldId: "firstname",
    labelText: "First Name",
    validatioMessage: "This field is required",
    hintTitle: "First name",
    hintText: "Please enter your first name",
    ngModel: "form.firstName",
    required: true
}

指令：

<inputfield params="paramz"></inputfield>

我的表单由几个步骤组成，每个步骤都有自己的ng-form我需要根据输入状态验证每个输入字段。据我所知，我不能只在表达式中使用动态变量我的选项，验证只包括$ diry＆amp;＆amp; $无效

/*------------------------------*\
    Grid System
\*------------------------------*/

.row,
.column {
  box-sizing: border-box;
}
.row {
  margin-bottom: 5px;
}
.row:before,
.row:after {
  content: " ";
  display: table;
}
.row:after {
  clear: both;
}
.column {
  position: relative;
  float: left;
  display: block;
  padding: 0 7px;
}
.column-1 {
  width: calc(100% / 12 * 1);
}
.column-2 {
  width: calc(100% / 12 * 2);
}
.column-3 {
  width: calc(100% / 12 * 3);
}
.column-4 {
  width: calc(100% / 12 * 4);
}
.column-5 {
  width: calc(100% / 12 * 5);
}
.column-6 {
  width: calc(100% / 12 * 6);
}
.column-7 {
  width: calc(100% / 12 * 7);
}
.column-8 {
  width: calc(100% / 12 * /);
}
.column-9 {
  width: calc(100% / 12 * 9);
}
.column-10 {
  width: calc(100% / 12 * 10);
}
.column-11 {
  width: calc(100% / 12 * 11);
}
.column-12 {
  width: 100%;
  margin-left: 0;
}
@media only screen and (max-width: 550px) {
  .column-1,
  .column-2,
  .column-3,
  .column-4,
  .column-5,
  .column-6,
  .column-7,
  .column-8,
  .column-9,
  .column-10,
  .column-11,
  .column-12 {
    float: none;
    width: auto;
  }
  .column + .column {
    margin-left: 0;
  }
}
section.ng-valid.ng-dirty h1.header:after {
  content: "\f00c";
  margin-left: 10px;
  font-family: fontawesome;
}
body {
  font-family: Arial;
}
.column input[type=radio] {
  display: none;
}
input[type=text] {
  border: 1px solid #569e48;
  width: 100%;
  font-size: 14px;
  line-height: 1em;
  padding: 0 7.5px;
  min-height: 36px;
  position: relative;
}
input.ng-invalid.ng-touched {
  border: 1px solid #a90041;
  background: #f9f2f4;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E");
  background-position: center right .625em;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
  background-size: 1.25rem 1.25rem;
}
input.ng-valid.ng-touched {
  background: #f9fcf5;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#5cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
  background-position: center right .625rem;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
  background-size: 1.25rem 1.25rem;
}
.fieldset {
  display: flex;
}
.fieldset .column {
  flex: 1;
  padding: 5px 7px;
  line-height: 35px;
}
.fieldset:hover {
  background: #ebf5de;
  box-sizing: border-box;
  outline: 1px solid #60a250;
}
.fieldset:hover .hint {
  display: block;
}
.hint {
  position: absolute;
  display: none;
}
input {
  box-sizing: border-box;
}

<div class="content-body">
  <div class="row fieldset">
    <div class="column column-3">
      <label for="fistName">Name</label>
    </div>
    <div class="column column-5">
      <input id="fistName" type="text" required name="lasttName" ng-model="form.lasttName" />
    </div>
    <div class="column column-4">
      <span class="hint">
                Name
                Please enter your name
            </span>
    </div>
  </div>
  <div class="row fieldset">
    <div class="column column-3">
      <label for="lastName">Surname</label>
    </div>
    <div class="column column-5">
      <input id="lastName" type="text" required name="lasttName" ng-model="form.lasttName" />
    </div>
    <div class="column column-4">
      <span class="hint">
                Surname
                Please enter your surname
            </span>
    </div>

  </div>
</div>

如果我只是复制粘贴代码并调整标记就可以了，但我不想重复所有代码，所以我创建了自定义指令。

使用第1和第3列非常简单，它只是我需要显示的文本字符串，第二次是痛苦...... 我需要检查输入状态，大部分时间没有使用指令，就像之前提到的那样$ invalid＆amp;＆amp; $ dirty，但我不知道我怎么能在指令中做到这一点。如果有人有兴趣帮助我，我可以根据我的确切问题向您发送有效的解决方案

Angular自定义指令绑定＆amp;验证

0 个答案: