Angular 角度形式：在“后松开输入值”@&引用；符号

这是我的表格：

<form class="inbox col-sm-10" action="" [formGroup]="form" (ngSubmit)="onSubmit()">
  <div class="buttons">
    <span class="label"></span>
    <button class="btn btn-control btn-send" type="submit" [ngClass]="{hidden: !!letter._id}">Save</button>
    <button class="btn btn-control btn-back" (click)="clickBack()" >Go back</button>
  </div>

  <div class="to">
    <span class="label">to:</span>
    <span class="input">
      <input class="mail-to" type="text" typeahead formControlName="to">
    </span>
  </div>

  <div class="subject">
    <span class="label">subject:</span>
    <span class="input">
      <input class="mail-subject" type="text" formControlName="subject">
    </span>
  </div>

  <div class="body">
    <span class="label">body:</span>
    <span class="input">
      <textarea class="mail-body" formControlName="body" cols="30" rows="10">{{letter.body}}</textarea>
    </span>
  </div>
</form>

问题是“to”字段的值在“@”simbol之后被截断。即，如果该值为“john@mail.com然后

this.form.value.to

将包含“john”，如果从输入中删除“@”simbol，则值将为“johnmail.com”

---

我做错了什么？

似乎包括@mail.com部分，该标记由指令“typeahead”直接填充（

evt.target.value=…

），我发现指令（或任何其他代码）插入表单字段的值没有传递到FormGroup中。所以我通过将formGroup传递到指令中来解决这个问题。非常感谢你在Plunker上的代码-它真的让我以正确的方式思考

  createForm(letter?: ILetter) {
    if (letter) {
      // existing letter
      this.form = this.formBuilder.group({
        'to': this.letter.to,
        'subject': this.letter.subject,
        'body': this.letter.body
      });
    } else {
      // new letter
      this.form = this.formBuilder.group({
        'to': undefined,
        'subject': undefined,
        'body': undefined
      });
    }
  }

  onSubmit(): void {
    this.letter.to = this.form.value.to;
    this.letter.body = this.form.value.body;
    this.letter.subject = this.form.value.subject;

    this.lettersService
        .saveLetter(this.letter)
        .subscribe((dat) => {
          this.router.navigate(['/mail/sent']);
        },
        err => console.log('ERROR: ' + err)
        );
  }