angular7表单数据联动验证

首先介绍一下当前我的业务场景：
表单页面上有两条数据，举个例子：库存和出售量。

首先库存是不能超过出售量的。
当用户输入的时候，库存是不能超过售出量的，所以我需要对这两个表单值进行联动。
期初思路：
1.vue框架下一样，手写一个方法，判断如果不过就return false ，过了就true
2.使用angular中的异步验证。

1.手写一个比较方法，获取的是formgroup里的value值，在group声明的时候调用方法checkNum，但是并不能获取到当前input框的值（此处可能表达不明确，上代码）

代码都是自己瞎起的名字哦，工作代码不可随便公开~~~

ngOnInit() {
    this.initForm();//组件初始化就调用了我的数值判断方法
  }

  initForm() {
    this.buildForm();
  }

checkNum(){
  (this.xxxData.value.warnTimes > this.xxxData.value.buyTimes){
     console.log('nonono')
  }
};

 中间略
  private buildForm() {
    this.xxxData = this.fb.group({
      buyTimes: ['',
      [
        Validators.required,
        this.checkNum,
        ],
      ],
      warnTimes: ['',
        [
          Validators.required,
        ]
      ],
    });
  }

由于我在组件加载的时候就对两个值进行比较，所以获得两个undefined。那么我换一个地方调用它。
修改它的xxxData.invalid=true
结果爆出错误：invalid是只读数据，不可修改。
2.使用angular中的异步验证。
使用原因：我是用angular自带的form中的invalid 控制下一步表单是否可以正常提交，所以使用angular自带的formgroup是最简便的方式。
没使用的原因：使用异步验证需要发送一个请求(一个promise或者rxjs)，而我当下的是获取两个input值进行比较，不适合本次业务实现场景。

最后解决办法：

设置一个布尔值numCheck。与xxxData.invalid一起决定按钮下一步是否可以点击
[disabled]="xxxData.invalid || numCheck"
写一个方法，在脏值检测的时候进行检测

 ngDoCheck() {
    this.biggerTimes();
  }

biggerTimes() {
    if (this.xxxData.value.buyTimes && this.xxxData.value.warnTimes) {
      if (Number(this.xxxData.value.buyTimes) < Number(this.xxxData.value.warnTimes)) {
        this.numCheck = true;
      } else {
        this.numCheck = false;
      }
    } else {
      return;
    }

html中的按钮：[disabled]="xxxData.invalid || numCheck"
错误的文字提示html
 <div class="warn-message" [hidden]="!(numCheck && xxxData.controls.warnTimes.dirty)">文字提示内容</div>