html 使用Angular 从表单A填充表单B中字段

piztneat 于 2022-12-09 发布在 Angular

关注(0)|答案(1)|浏览(154)

我是Angular的新手，正在尝试实现以下情况。假设我在formA.html中有一个表单A：

<div class="row">
  <div class="col-sm-3">
     <span class="col-sm-12">Statement1: </span>
   </div>
   <div class="col-sm-9">
      <mat-form-field class="example-full-width" appearance="outline">
      <mat-label> Statements </mat-label>
      <textarea spellcheck="true" matInput placeholder="" formControlName="case1" cols="100" rows="10"</textarea>
      </mat-form-field>
    </div>
</div>

并且我希望用表单A中的statement1值填充comments字段。如何实现这一点呢？

<div class="row">
  <div class="col-sm-3">
     <span class="col-sm-12">comments: </span>
   </div>
   <div class="col-sm-9">
      <mat-form-field class="example-full-width" appearance="outline">
      <mat-label> comment# </mat-label>
      <textarea spellcheck="true" matInput placeholder="" formControlName="comments" cols="100" rows="10">  this has to be the value thats in form A statement 1 field.</textarea>
      </mat-form-field>
    </div>
</div>

Html

来源：https://stackoverflow.com/questions/74735083/populate-a-field-in-form-b-from-form-a-using-angular

1条答案

按热度按时间

hc2pp10m1#

在Angular 1组件应该只有1个html文件。这意味着有其他事情要考虑在您的问题，如，这些组件是如何相关的。
您使用的是React式表单，因此我将描述一个React式表单的示例。
我只是想考虑一下，你有两个完全不同的组件。所以你想在第一个组件（数据放在那里）中做的是，你监听表单的valueChanges（）。把这个值安全地放入一个服务中，然后从第二个组件的服务中获取数据。

this.form.valueChanges.subscribe((data) => {
// some BehaviorSubject or Observable will get the data int
 this.service.subject.next(data)...
})

valueChanges属性存在于整个窗体和特定的formControls上。在第二个组件中，您将订阅主题并对值更改做出React。

this.service.subject.subscribe((data) =>  this.form.controls['somevalue']).setValue(data);

就是这样。

赞(0）回复(0）举报 2022-12-09

我来回答

html 使用Angular 从表单A填充表单B中字段

1条答案

相关问题

热门标签

最新问答