Question

我有一个包含多个输入和选择菜单等的表单，我试图使用它的值在另一个兄弟组件中填充另一个表单。

我已经设法通过下面的代码只使用一个硬编码来完成它，但是如何使用输入到初始表单中的值来完成它？

以下是我一直试图实现它的方法，但没有运气......

我目前有一个处理这个名为data.service的服务：

  private messageSource = new BehaviorSubject<IQuote>(quote);
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(quote: IQuote) {
    this.messageSource.next(quote);
  }

我将此界面用于表单：

export interface IQuote {
  firstname: string;
  surname: string;
}

我的初始表单HTML：

<form [formGroup]="quote" (ngSubmit)="post(quote.value)">

  <fieldset>
      <label class="question" for="firstname">First name</label>
      <input ngModel name="firstname" formControlName="firstname" id="firstname" class="textbox" type="text"/>
      <div class="error" *ngIf="firstname.touched && firstname.invalid">Your first name is required.</div>
  </fieldset>

  <fieldset (mouseenter)="addClass($event)" (mouseleave)="removeClass($event)">
      <label for="surname">Surname</label>
      <input ngModel name="surname" formControlName="surname" id="surname" type="text"/>
      <div *ngIf="surname.touched && surname.invalid">Your surname is required.</div>
  </fieldset>

初始形式打字稿：

quote: IQuote;

post(quote) {

  this.quoteService.create(quote);

  this.dataService.changeMessage(quote);
}

需要填充的表单：

  <fieldset>
      <label for="firstname">Firstname</label>
      <input id="firstname" type="text" [value]="quote.firstname"/>
      <div *ngIf="firstname.touched && firstname.invalid">Please select a title.</div>
  </fieldset>

  <fieldset>
      <label for="surname">Surname</label>
      <input id="surname" type="text"/>
      <div *ngIf="surname.touched && surname.invalid">Please select a title.</div>
  </fieldset>

需要填充的表单的typrescript：

quote: IQuote;

ngOnInit() {
  this.dataService.currentMessage.subscribe(quote => 
    this.quote = quote);
}

如果您需要其他任何内容，请与我们联系。

由于

Angular 2/5 - 使用服务

0 个答案: