单击angularjs中的按钮显示动态表单?

时间:2016-09-08 11:55:31

标签: angularjs

我是angularjs的新手,我想显示一个动态表单字段,这些字段必须具有唯一的名称,以便它可以帮助我进行验证。

提前致谢..

下面是脚本代码

$scope.contact = [
{
  cp: '',
  disgn: '',
  dept: '',
  email: '',
  mob: '',
  wta: '',
  landline1: '',
  ext: '',
  landline2: '',
  ext: ''
}];

$scope.add = function() {
    var dataObj = {cp:'', disgn:'',dept:'',email:'',mob:'',wta:'',landline1:'',ext:'',landline2:'',ext:''};
    $scope.contact.push(dataObj);
}

下面是HTML代码

        <div ng-repeat="input in contact">
        <br><br>
          <div class="form-group col-md-8">
            CONTACT PERSON
            <input type="text" name="input.cp" class="form-control" ng-model="input.cp"/>
          </div>

          <div class="form-group col-md-8">
            DESIGNATION
            <input type="text" name="input.disgn" class="form-control" ng-model="input.disgn"/>
          </div> 

          <div class="form-group col-md-8">
            DEPARTMENT
            <input type="text" name="input.dept" class="form-control" ng-model="input.dept"/>
          </div>

          <div class="form-group col-md-8">
            Email*:
            <input type="email" name="email" class="form-control" ng-model="input.email" required />
            <span style="color:red" ng-show="form.email.$dirty && form.email.$invalid">
            <span ng-show="form.email.$error.required">Email is required.</span>
            <span ng-show="form.email.$error.email">Invalid email address.</span>
            </span>
          </div> 

          <div class="form-group col-md-8">
            MOBILE
            <input type="number" name="input.mob" class="form-control" ng-model="input.mob"/>
          </div>

          <div class="form-group col-md-8">
            WHATSAPP#
            <input type="number" name="input.wta" class="form-control" ng-model="input.wta"/>
          </div> 
          <div class="form-group col-md-8">
            LANDLINE1 
            <input type="number" name="input.landline1" class="form-control" ng-model="input.landline1"/>
          </div>   
          <div class="form-group col-md-8">
            EXT:
            <input type="text" name="input.ext" class="form-control" ng-model="input.ext"/>
          </div>  
          <div class="form-group col-md-8">
            LANDLINE2 
            <input type="number" name="input.landline2" class="form-control" ng-model="input.landline2"/>
          </div>   
          <div class="form-group col-md-8">
            EXT:
            <input type="text" name="input.ext" class="form-control" ng-model="input.ext"/>
          </div>                

        </div>
        <button ng-click="add()">Add Contact Person</button>

如果我添加新的联系人,因为新旧电子邮件输入的电子邮件名称验证无法正常工作

1 个答案:

答案 0 :(得分:0)

如果你有HttpHost proxy = new HttpHost("proxy.com", 80, "http"); DefaultProxyRoutePlanner routePlanner = new DefaultProxyRoutePlanner(proxy); CloseableHttpClient httpclient = HttpClients.custom() .setRoutePlanner(routePlanner) .build(); 个对象: -

$scope.contact

然后声明HTML,如: -

$scope.contact = {
    cp: '',
    disgn: '',
    dept: '',
    email: '',
    mob: '',
    wta: '',
    landline1: '',
    ext: '',
    landline2: '',
    ext: ''
};