Блог

Я успешно создал страницу, на которой есть две формы. У меня возникли трудности с тем, как разделить две формы на отдельные компоненты. Я уже добавил компоненты для каждой формы. Как бы я сделал это рекомендуемым и правильным способом?

Пожалуйста, проверьте мой stackblitz здесь, НАЖМИТЕ ЗДЕСЬ

 this.personalDetails = this.formBuilder.group({
  name: ["", Validators.required],
  email: ["", Validators.required],
  phone: ["", Validators.required],
});
this.addressDetails = this.formBuilder.group({
  city: ["", Validators.required],
  address: ["", Validators.required],
  pincode: ["", Validators.required],
});
 

Чтобы разделить большой .html на два компонента, вы можете выполнить три шага

1. Используйте тот же .html, что и основной.
2. Необходимые переменные , которые вы используете @Input , например, для «личной информации», вам нужны

       @Input() personalDetails:FormGroup
      @Input() personal_step = false;
 

3. Функции являются отправителями событий, поэтому для получения личной информации вам необходимо

     @Output() next:EventEmitter<any>=new EventEmitter<any>()
 

4. Немного измените .html -действительно выйдите "*ngIf="step==1" и
   измените (click)="next()" , чтобы использовать вывод

     <input (click)="next.emit(null)" .../>
 

5. Некоторые функции необходимо перевести в компонент
6. Вам также нужно скопировать файл .css. Я выбираю поместить файл .css в файл styles.css (он является общим для всех приложений

Я раздвоил твой стакблитц здесь

Ты почти на месте, ты можешь сделать что-то вроде этого:

личная информация.компонент.ts

 import { Component, Input, OnInit } from '@angular/core';

export interface PersonalInfo {
  name: string
  email: string
  phone: string
}

@Component({
  selector: 'app-personal-info',
  templateUrl: './personal-info.component.html',
  styleUrls: ['./personal-info.component.css']
})
export class PersonalInfoComponent implements OnInit {

  @Input() personal: PersonalInfo; // <---- input data for your component

  constructor() { }

  ngOnInit() {
  }

}
 

затем в личном компоненте html:

 <form>
  <input type="text" [(ngModel)]="personal.name" />
</form>
 

и в вашем компоненте приложения что-то вроде:

 <personal-info [personal]="currentUser.personalInfo" />