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

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

Answer 2

我可以从您的HTML中推断出，您有一个名为FormGroup的{{1}}和一个名为video的{{1}}。这些是我认为您需要进行的编辑。

更新您的输入元素以使用Angular FormControl事件发射器：

url

然后在组件中使用以下方法：

(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">函数以使其成为组件的一部分。如果您希望普通JS更新Angular FormGroup，那么您使用的是Angular错误，我强烈建议您不要继续使用该路径。

角度2-更改嵌套表单输入值

2 个答案: