怎么用angularjs把接口数据绑定到input框

常用的表单验证指令

1. 必填项验证

某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：

<input type="text" required />

2. 最小长度

验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"：

<input type="text" ng-minlength="5" />

3. 最大长度

验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength="{number}"：

<input type="text" ng-maxlength="20" />

4. 模式匹配

使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式：

<input type="text" ng-pattern="/[a-zA-Z]/" />

5. 电子邮件

验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可：

<input type="email" name="email" ng-model="user.email" />

6. 数字

验证输入内容是否是数字，将input的类型设置为number：

<input type="number" name="age" ng-model="user.age" />

7. URL

验证输入内容是否是URL，将input的类型设置为 url：

<input type="url" name="homepage" ng-model="user.facebook_url" />

前端框架 angular8.0

ui组件 NG-ZORRO

场景：表单输入: 前端动态添加input框

数据：eg：['123','222','xxx'] 数组每项为string类型 ， ["192.168.1.127/24", "123.2.1.11", "123.2.1.11-192.168.1.127

<div  *ngFor="let item of ipPoolData['_ipAddress'] index as itrackBy:trackByFn"  style="height: 50pxposition: relative">

    <input name="{{'_ipAddress'+ i}}" nz-input type="text" placeholder="请输入IP/子网IP/子网范围" required

        [(ngModel)]="ipPoolData['_ipAddress'][i]" (ngModelChange)="checkIpRangeVal($event)">

    <span *ngIf="error['iprange']" class="text-error">IP输入不合法</span>

    <div class="btn-handle-item">

        <button nz-button nzType="danger" [nzSize]="'small'"

                (click)="deleteIPCollectionField(i)" *ngIf="ipPoolData['_ipAddress'].length>1">

                <i nz-icon nzType="minus" nzTheme="outline"></i>

        </button>

        <button *ngIf="item &&ipPoolData['_ipAddress'].length <5"

                nz-button nzType="primary" [nzSize]="'small'" [disabled]="ipPoolData['_ipAddress'].length-1 >i " (click)="addIPCollectionField()">

                <i nz-icon nzType="plus" nzTheme="outline"></i>

        </button>

    </div>

</div>

            

坑1：

问题： 当数组每项为string类型时，循环后input内ngmodel直接用item绑定，会出现ngmodle无法赋值问题

解决：数组ngfor循环后每项内容ngmodel绑定需用ipPoolData['_ipAdress'][i]，若直接用item则无法绑定数据，ngmodel一般需要item.value类型；

坑2：

问题：input每输入一个字符，鼠标就会失焦问题；

原因： ngmodel用ipPoolData['_ipAdress'][i]绑定后，input每次输入后，angular会重新查询服务器可能会重置包含所有新条目对象的列表，即使先前已显示这些条目也是如此；在这种情况下，Angular只能看到由新的对象引用组成的新列表，它别无选择，只能用所有新的 DOM 元素替换旧的 DOM 元素。 因此会出现input每输入一个字符，鼠标就会失焦问题；

解决方案：

<div *ngFor="let item of ipPoolData['_ipAddress'] index as itrackBy:trackByFn"></div>

ngFor循环后使用trackBy：trackByFn；向该组件添加一个方法，该方法返回 NgFor 应该跟踪的值。这个例子中，该值是ipPoolData['_ipAdress']的i项，如果 ipPoolData['_ipAdress']的index项已经被渲染，Angular 就会跟踪它，而不会重新向服务器查询相同的ipPoolData['_ipAdress']的index项。

trackByFn(index: any, item: any) {

         returnindex  

}

第一步，打开HBuilder开发工具，在指定的Web项目中新建静态页面init.html，并引入Bootstrap和AngularJS相关的文件

第二步，在body元素添加ng-controller指令，并在里面添加<table></table>

第三步，在<script></script>里编写AngularJS初始化函数，并声明控制器

第四步，预览该静态页面，在浏览器查看页面效果，显示一个输入框和按钮

第五步，在控制器中添加变量model，这个变量赋值数组

第六步，在表格table循环model变量，遍历该数组并给表格赋值

注意事项

注意AngularJS动态获取表格数据

注意AngularJS动态赋值

---