2018-07-20----Angular之使用FormControl自定义正则验证的坑

摸索Angular已经两个多月了，在开发的过程中，也遇到很多坑和不会的，基本都能通过网上的途径解决。但是昨天遇到一个很意向不到的问题，花了很多时间，才知道是一个很小的原因导致的。所有自己一定要总结分享一下才痛快，这也算是自己的第一篇原创分享，希望能帮到一起爬坑的人。

1、场景还原

1.1 需求

有一个用户可以选择是否修改信息的radio单选按钮选择

 <div class="form-group">
            <label class="col-sm-3 control-label">是否修改信息：
               <span class="text-red">*</span>
           </label>
            <div class="col-sm-7">
              <div class="input-group radio" style="width:100%">
                   <label>
                      <input type="radio" name="edit" value="0" formControlName="edit" /> 否
                   </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   <label>
                          <input type="radio" name="edit" value="1" formControlName="edit" /> 是
                   </label>
              </div>
             </div>
 </div>

当选择 '否' 的时候，有默认值填充，并禁用，当选择 '是' 的时候，可以编辑信息并进行相应的正则验证，所以我采用的是使用*ngIf进行判断显示对应的表单是禁用的还是可以编辑的，做法如下：

 <input *ngIf="testForm.controls.edit.value==0" disabled="disabled" maxlength="10" type="text" class="form-control" placeholder="输入您的爱好" formControlName="habit">
 <input *ngIf="testForm.controls.edit.value!=0" maxlength="140" type="text" class="form-control" placeholder="输入您的爱好" formControlName="habit">

当用户编辑信息时，需要满足正则验证，过滤掉不合法的字符串，所有我在ts中的验证如下：

 public testForm=new FormGroup({
        edit:new FormControl('0'),
        habit:new FormControl('跳舞，唱歌，跑步，吃吃喝喝'，[this.isTrue])
});

isTrue( g:Formcontrol ) {
  let habit=g.value;
  let reg_1=/^\S/;
  let reg_2=/\S$/;
 return reg_1.test(habit)&&reg_2.test(habit) ? null :{ 'habit':true };
}

1.2 bug 诞生

是否修改信息-----是，然后编辑habit时，会出现，正则验证通过，但是却提示非非法输入（输入框为红色）。
** 正则验证是通过的，返回的也是null，但是就是会报错 **，

1.3 问题原因和解决

<input *ngIf="testForm.controls.edit.value==0" disabled="disabled" maxlength="10" type="text" class="form-control" placeholder="输入您的爱好" formControlName="habit">
这个代码的maxlength出错了，最长字符串为10，虽然当启动修改时，这个通过ngIf已经过滤掉，并且不渲染到DOM上，但是FormControl里面的验证还是会验证这个的，所有导致这个奇怪的问题产生。
解决方法：同步两个ngIf的最大输入长度限制。