Question

这是应用程序的图片，因此您可以了解我在说什么：

所以我正在尝试在Angular中创建一个webapp，您可以在其中添加约会并显示约会数组。我这样做只是出于学习原因

您可以在图像中看到，您可以在左侧添加约会，并在右侧看到列表。

现在我想做的是，当您单击列表中的Enter键时，将约会对象传递给表单，但是我不知道该怎么做...

我已经尝试过将表单组件（左）注入到listcomponent（右）中，这样我就可以直接在按钮的（click）事件上传递它，而且还可以，我可以成功记录约会，但是它没有出现在表单中。

我已经为我要放在这里的大量代码感到抱歉，但是我是一个初学者，所以不要对我太刻薄

这是表单组件：

@Component({
  selector: 'app-appointment-form',
  templateUrl: './appointment-form.component.html',
  styleUrls: ['./appointment-form.component.css']
})
export class AppointmentFormComponent implements OnInit {
  form: FormGroup;

  constructor(
    private appointmentService: AppointmentService,
    private fb: FormBuilder
    ) { }

  ngOnInit() {
    this.form = this.fb.group({
      companyName: '',
      notes: '',
      date: '',
      time: ''
    })
  }

  onAddAppointment() {
    this.appointmentService.addAppointment(this.form.value);
    this.form = this.fb.group({
      companyName: '',
      notes: '',
      date: '',
      time: ''
    })
  }

  onEditAppointment(i) {
    this.form = this.fb.group(this.appointmentService.editAppointment(i));
    this.form.controls['companyName'].setValue(this.appointmentService.editAppointment(i).companyName);
    console.log(this.form.value);
  }
}

这是它的html文件：

<form [formGroup]="form" (ngSubmit)="onAddAppointment()">
    <h4 class="title">Add a new Appointment</h4>
    <hr>

    <h5 class="title">Company Name</h5>
    <input class="textinput" formControlName="companyName" required>

    <div class="sectionlarge">
        <h5 class="title">Day of Arrival</h5>
        <input class="textinput" placeholder="Month Day, Year" formControlName="date" required [(ngModel)]="form.date">
    </div>

    <div class="sectionsmall">
        <h5 class="title">Time</h5>
        <input class="textinput" placeholder="00:00" maxlength="5" formControlName="time" required>
    </div>

    <h5 class="title">Additional Notes</h5>
    <textarea class="textinput" rows="4" formControlName="notes" required></textarea>
    <hr>

    <button class="submit" [disabled]="form.invalid">Submit</button>
</form>

这是我的列表组件：

@Component({
  selector: 'app-appointment-list',
  templateUrl: './appointment-list.component.html',
  styleUrls: ['./appointment-list.component.css']
})
export class AppointmentListComponent implements OnInit {
  appointments: Appointment[] = [];
  @Output() passData: EventEmitter<string> = new EventEmitter<string>();

  constructor(private appointmentService: AppointmentService,
    private formcomponent: AppointmentFormComponent) { }

  ngOnInit() {
    this.appointments = this.appointmentService.getAppointments();
  }

  onEdit(i) {
    this.formcomponent.onEditAppointment(i);
    console.log("list component check");
  }

  onClick(i) {
    this.passData.emit(i);
  }
}

当然还有对应的html：

<h4 class="title">List of Appointments</h4>
<hr>

<div *ngFor="let appointment of appointments ; index as i">
    <h5 class="title">{{ appointment.companyName }}<button class="edit" (click)="onEdit(i)">Edit</button></h5>
    <div class="info">
        <section>Time of arrival: <section class="float">{{ appointment.date }} | {{ appointment.time }}</section>
        </section>
        <section>{{ appointment.notes }}</section>
    </div>
</div>

还有服务editAppointment功能：

editAppointment(i) {
    return this.appointments[i];
  }
}

Answer 1

在AppointmentFormComponent上添加输入以获取数据，还对表单进行修补，以将数据设置为表单，如下所示：

export class AppointmentFormComponent implements OnInit, OnChanges {
  @Input() appointment: Appointment;

  form: FormGroup;

  constructor(
    private appointmentService: AppointmentService,
    private fb: FormBuilder
    ) { }

  ngOnInit() {
    this.form = this.fb.group({
      companyName: '',
      notes: '',
      date: '',
      time: ''
    });

    this.patchForm();
  }

  ngOnChanges(changes: Record<keyof AppointmentFormComponent, SimpleChange>) {
    if (changes.appointment && changes.appointment.currentValue) {
       this.pacthForm();
    }
  }

  patchForm() {
    if (this.form && this.appointment) {
        this.form.patchValue(this.appointment);
    }
  }

角度|我如何在另一个组件的形式内显示对象

1 个答案: