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

Question

我为我的嵌套输入创建了一个过滤器，我使用 javascript 来过滤 link 每当粘贴事件被触发时。

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

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

如果我向输入添加其他内容，例如 space，我只能让我的过滤器工作。

Answer 1

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

Answer 2

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

更新您的输入元素以使用 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 是错误的，我强烈建议您不要继续沿着这条路走下去。

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

Angular 2 - Change nested form input value

javascript

nested-forms

typescript

angular