Angular 2 - 更改嵌套表单输入值

Question

我为我的嵌套输入做了一个过滤器，我使用javascript来过滤粘贴事件时的链接。

function fixLink(foo){

            if (foo.includes('youtube') && (foo.includes('watch')) || foo.includes('vimeo') && !foo.includes('video') ) {
              foo = foo.includes('youtube') ? 'https://www.youtube.com/embed/' + foo.slice(foo.indexOf('=') + 1) : foo;
              foo = foo.includes('vimeo') ? 'https://player.vimeo.com/video/' + foo.slice(foo.indexOf('com/') + 4) : foo;
            }

            return foo;
          }

input.addEventListener('paste', () => {
            setTimeout(() => {
              input.text = fixLink(input.value);
              input.value = fixLink(input.value);
            }, 100)
          });

这是我的HTML

@Component({
        selector: 'video-control',
        template: `<div class="form-group p-0 mb-2" [formGroup]="video">
        <div class="input-group group-social">
        <input [disabled]="onHold" class="form-control" formControlName="url" type="text" (focus)="setUrl($event.target)" placeholder="https://www.youtube.com/watch?v=IWfWqDhx65s">
        <button type="button" class="remove-photo-gallery btn btn-sm btn-danger" (click)="removed.emit(index)">
        <i class="fas fa-trash"></i>
        </button>
        </div>
        </div>`,
      })

它会改变输入值但是当我保存它时，它就像过滤器不起作用一样。

如果我像输入空格一样在输入中添加其他内容，我只能让我的过滤器工作。

Answer 1

我可以从你的HTML推断出你有一个名为FormGroup的video，它有一个名为FormControl的url。这些是我认为您需要进行的编辑。

更新输入元素以使用Angular (paste)事件发射器：

<input [disabled]="onHold" class="form-control" formControlName="url" type="text" (focus)="setUrl($event.target)" (paste)="onPaste($event)" placeholder="https://www.youtube.com/watch?v=IWfWqDhx65s">

然后在您的组件中有以下方法：

onPaste(event: ClipboardEvent) {
    const clipboardData = event.clipboardData || window.clipboardData;
    const fixedLink = this.fixLink(clipboardData.getData('text'));
    window.setTimout(() => this.video.get('url').value = fixedLink);
}

您还需要将此fixLink函数移动到该组件的一部分。如果你希望普通JS更新Angular FormGroup然后你使用Angular错误，我强烈建议不要继续沿着这条路走。

Answer 2

尝试使用双向绑定到input元素的值并在paste事件上触发fixLink函数以更改绑定到输入值的属性。