javascript - 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>`,
      })

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

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

标签： javascriptangulartypescriptnested-forms

Answer 1

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