javascript - 单独或一起检查属性是否有意义？

Question

这个问题源于我之前问过的一个问题。 How do you access the for loop of the parent component within a child component which has the inputs?

我想知道是否可以单独而不是一起检查每个属性的有效性？所以这是我尝试检查标题输入字段然后检查 url 字段的逻辑。

onUrlUpdate($event) {
    var exp = /\b((http|https):\/\/?)[^\s()<>]+(?:\([\w\d]+\)|([^[:punct:]\s]|\/?))/;
    // completely overkill, but just used to demonstrate a point
    var url = this.urls.find(_url => {
      // we can see here that the $event.url is actually the same object as the urls[i] that was
      // passed to the child. We do not lose the reference when it is passed to the child or back
      // up to the parent. 
      return $event.url === _url
    });
    if (url.url.match(exp)) {
      url[$event.prop] = $event.newValue;
     console.log(`Updated URL's "${$event.prop}" property with the value "${$event.newValue}"`);
    }  else if(url.title === ''){
        console.log('not valid text ');
    }
  }

我得到的输出是

not valid text

这是我每次在标题和网址字段中输入任何文本时的结果。有没有办法让我只检查标题字段？然后将正则表达式用于 url 字段？还是我必须将这两个字段拆分为单独的 div 类？

这是我正在修改的例子的链接 https://stackblitz.com/edit/angular-empty-project-zoy4st?file=app%2Fparent.component.ts

Answer 1

要单独检查 Prop ，您需要做的就是根据$event.prop在更新函数中添加一个条件。如果 $event.prop 是 url，则验证 url，如果是 title，则验证标题。

也就是说，您当前的验证存在问题。您正在检查现有 url 对象的值，而不是传入的新值。我在这里更新了它，它似乎工作正常:

https://stackblitz.com/edit/angular-empty-project-tcdfup?file=app/parent.component.ts