在formarray中存储并显示输入消息

发布于 01-24 14:35 字数 1578 浏览 5 评论 0 原文

我创建了一个输入字段,用户可以在其中输入消息,然后在键入输入我要显示此消息的键输入中。

export class AppComponent  {
 
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.createForm();
  }


  onEnter() {
    this.addThing();
  }

  get things() {
    return this.myForm.get('things') as FormArray;
  }

  private createForm() {
    this.myForm = this.fb.group({
      things: this.fb.array([
        this.fb.control('')
      ])
    });
  }

  private addThing() {
    this.things.push(this.fb.control(''));
  }
}

HTML:

<div class="display-text">
                            <p
                               *ngFor="let thing of things.controls; let i=index">{{thing.value}}
                            >
                                {{ message.value | json}}
                            </p>
                        </div>
<div class="input">
                <form [formGroup]="myForm">
                    <ng-container formArrayName="things">
                        <ng-container
                            ngFor="let thing of things.controls; let i = index "
                        >
                            <input
                                type="text"
                                (keyup.enter)="onEnter()"
                            />
                        </ng-container>
                    </ng-container>
                </form>
            </div>

按Enter,该消息未显示在窗口中。有人可以帮忙吗?

中没有任何值存储

问题似乎是在formarray

I have created an input field where the user can enter a message and on keyup enter I want to display this message.

export class AppComponent  {
 
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.createForm();
  }


  onEnter() {
    this.addThing();
  }

  get things() {
    return this.myForm.get('things') as FormArray;
  }

  private createForm() {
    this.myForm = this.fb.group({
      things: this.fb.array([
        this.fb.control('')
      ])
    });
  }

  private addThing() {
    this.things.push(this.fb.control(''));
  }
}

Html:

<div class="display-text">
                            <p
                               *ngFor="let thing of things.controls; let i=index">{{thing.value}}
                            >
                                {{ message.value | json}}
                            </p>
                        </div>
<div class="input">
                <form [formGroup]="myForm">
                    <ng-container formArrayName="things">
                        <ng-container
                            ngFor="let thing of things.controls; let i = index "
                        >
                            <input
                                type="text"
                                (keyup.enter)="onEnter()"
                            />
                        </ng-container>
                    </ng-container>
                </form>
            </div>

When pressing enter, the message is not displayed in the window. Can someone help?

The Problem seems to be that no value is being stored in the formArray

enter image description here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文