Angular 在反应形式中，ngModel的等价物是什么？

我有一个表格，在发布视频之前，我在youtube上预览视频。我也使用反应形式

我需要能够让用户预览他们的视频发布前，如果关闭，目前，我使用的是ngModel的工作

<iframe *ngIf="video_url; else preview"
   [src]="'https://www.youtube.com/embed/' + video_url | safe: 'resourceUrl'" frameborder="0" .allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"allowfullscreen></iframe>
    <ng-template #preview>
      <div class="preview">
        <span>
         <p><i class="fab fa-youtube"></i></p>
         <p><small>Preview Your Youtube Video Here</small></p>
        </span>
      </div>
    </ng-template>
 <input type="text" 
        formControlName="video_url" id="video_url" 
        [(ngModel)]="video_url"
        placeholder="Add your Video ID here e.g: https://youtube.com/This_Is_Your_Video_ID"
 >

在此预览您的Youtube视频

我知道这不是最佳做法，因为我现在在控制台中收到以下警告：

看起来您在与相同的表单字段上使用了ngModel formControlName。 支持将ngModel输入属性和ngModelChange事件用于 Angular v6中已弃用被动表单指令，将被删除 在角度v7中

使用响应式表单onchange（$event）对表单中的现有或新值进行“建模”的最佳方法是什么？还是有更好的方法

---

我说“现有”和“新”，因为当表单处于编辑状态时，我还需要对article.video\u url中的现有video\u url进行建模。目前，这只适用于一种方法，而不适用于现有值和新值

可能是错误的，但您似乎在询问如何设置表单控件的值

它通常看起来像这样：

this.form.setValue({video_url: this.video_url})

this.form.get('video_url').setValue(this.video_url)

其中表单是您的组，控件键入“video_url”。您可以像这样设置任意多个组值，还有一个

patchValue（）

，它将修补输入的表单值，而不是设置整个内容，或者您可以像这样设置单个控件：

this.form.setValue({video_url: this.video_url})

this.form.get('video_url').setValue(this.video_url)

设置该值的时间和位置取决于此.video_url的设置位置和位置，因此在不了解更多组件控制器的情况下，很难确定地说。但通常的怀疑是在数据订阅中，或在输入的情况下，在onInit生命周期挂钩或输入设置器中

了解表单值何时更改很简单，因为每个表单控件或组都会公开一个可观察到的值更改：

this.form.valueChanges.subscribe(newValue => console.log(newValue))

---

这将在表单组中的每个值更改时发出，但如上所述，您也可以订阅单个控件valueChanges流，该流仅在该控件更改时发出。

因此，由于上面的注释，我得到了正确的解决方案。如果将来有人需要解决这个问题，我会把我的代码放在这里

因此，我在editArticle方法中设置了valueChanges事件，如下所示：

编辑文章（文章：文章）{

然后，它将侦听输入字段上的更改并将其记录为video_url的新值，但也会在视图中正确预览视频url：

表格的一小部分，与问题相关：

<input type="text" formControlName="video_url" id="video_url"
 placeholder="Add your Video ID here e.g: https://youtube.com/This_Is_Your_Video_ID">
   <iframe *ngIf="article.video_url; else preview"
    [src]="'https://www.youtube.com/embed/' + article.video_url | safe: 'resourceUrl'" frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
   <ng-template #preview>
       <div class="preview">
           <span>
             <p><i class="fab fa-youtube"></i></p>
             <p><small>Preview Your Youtube Video Here</small></p>
           </span>
       </div>
   </ng-template>

在此预览您的Youtube视频

---

当使用被动表单时，表单上不再需要ngModel！！！：）

被动表单的要点是使用

FormControl

s而不是

ngModel

。这就是为什么同时使用

formControlName

和

ngModel

是没有意义的。创建

FormControl

的最简单方法是使用

constmyFormControl=new FormControl（）

位于

ts

侧，并通过

分配它。然后您可以订阅

myFromControl.valueChanges（）

这是一个可观察的

。谢谢Arnaud，这也可以容纳新的和现有的视频url值？我不明白这个问题。输入值实际上是双向数据索引到

myFormControl.value

。希望它能帮上忙。谢谢，Arnaud，这是一个很大的帮助！我从这两个方面都做了一些工作，以获得必要的结果。您的帮助确实为我清理了formControl。我看错了方向，现在我明白了。谢谢你。谢谢，布莱恩！我从你和阿诺那里得到了一点，以得到想要的结果！正是我需要的。谢谢你。