如何使用现有行将另一个患者添加到表单中?

Question

我是 angular 8 的新手，我想通过按钮将另一个患者添加到表单中，最简单的方法是什么？ 我已经在 html 中创建了一个表单并引导并相应地添加了验证。谷歌快速搜索显示我需要通过 FormArray 执行此操作，但我不想更改项目中已经存在的代码

<form class="form-horizontal" [formGroup]="patientForm" #f="ngForm" (ngSubmit)="GoToCheckin(f)">
<div class="form-group">
<label class="control-label col-sm-2" for="sel1">Your selected Doctor:</label>
<div class="col-sm-2">
<select class="form-control" id="sel1" formControlName="doctor">
<option *ngFor="let Dr of configDr" [ngValue]="Dr.name">{{ Dr.name }}</option>
</select>
</div>
<div class="col-sm-4">
<p>ETA: {{ waitingTime }} min</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-3">
<input type="email" class="form-control" id="email" placeholder="Enter email" formControlName="email" />
<span *ngIf="!patientForm.get('email').valid && patientForm.get('email').touched" class="help-block">
This feild is required!
</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Phone Number:</label>
<div class="col-sm-3">
<input type="number" class="form-control" id="phone" placeholder="Enter phone #" formControlName="phone" />
<span *ngIf="!patientForm.get('phone').valid && patientForm.get('phone').touched" class="help-block">
This feild is required!
</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">First name:</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="fname" placeholder="Enter First Name" formControlName="fname" />
<span *ngIf="!patientForm.get('fname').valid && patientForm.get('fname').touched" class="help-block">
This feild is required!
</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Last name:</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="lname" placeholder="Enter Last Name" formControlName="lname" />
<span *ngIf="!patientForm.get('lname').valid && patientForm.get('lname').touched" class="help-block">
This feild is required!
</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Reason for visit:</label>
<div class="col-sm-3">
<textarea class="form-control" id="reason" rows="5" placeholder="Enter Reason"
formControlName="reason"></textarea>
<span *ngIf="!patientForm.get('reason').valid && patientForm.get('reason').touched" class="help-block">
This feild is required!
</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-3 col-sm-offset-4">
<button type="submit" class="btn btn-primary btn-lg"  [disabled]="!patientForm.valid">Check-in</button>
<span *ngIf="!patientForm.valid && patientForm.touched" class="help-block">
Please fill in all the fields!
</span>
</div>
</div>
</form>

export class PatientInfoComponent implements OnInit {
configDr: Config[];
patientForm: FormGroup;
selectedDoctor: string;
waitingTime: number;
dropDownDr: string;
constructor(private router: Router, private TimeService: ETAService, private EmployeeData: EmpData, private DrService: DrdataService) {
this.DrService.selectedDr.subscribe(tempDr => {
if (!tempDr) {
this.selectedDoctor = 'Any Doctor';
} else {
this.selectedDoctor = tempDr;
}
}
);
}
ngOnInit() {
this.showConfig();
this.patientForm = new FormGroup({
doctor: new FormControl(this.selectedDoctor),
email: new FormControl(null, [Validators.required, Validators.email]),
phone: new FormControl(null, Validators.required),
fname: new FormControl(null, Validators.required),
lname: new FormControl(null, Validators.required),
reason: new FormControl(null, Validators.required)
});
}
GoToCheckin(f: NgForm) {
this.TimeService.waiting_time = this.waitingTime;
this.router.navigate(['checkedin']);
}
showConfig() {
this.EmployeeData.getConfig()
.subscribe(data => {
this.configDr = data as Config[];
for (let count = 0; count < this.configDr.length; ++count) {
if (this.configDr[count].name === this.selectedDoctor) {
this.waitingTime = this.configDr[count].eta;
return;
}
}
});
}
public timeChange() {
console.log("Selected doctor: " + this.patientForm.get('doctor').value);
for (let count = 0; count < this.configDr.length; ++count) {
if (this.patientForm.get('doctor').value === this.configDr[count].name) {
this.waitingTime = this.configDr[count].eta;
}
}
}
}

Answer 1

真的很容易。将代码 patienForm 移动到函数，并声明一个 FormArray

myFormArray:FormArray=new FormArray([]);
newPatient()
{
return new FormGroup({
doctor: new FormControl(this.selectedDoctor),
email: new FormControl(null, [Validators.required, Validators.email]),
phone: new FormControl(null, Validators.required),
fname: new FormControl(null, Validators.required),
lname: new FormControl(null, Validators.required),
reason: new FormControl(null, Validators.required)
});
}

您的.html喜欢

<div *ngFor="let patientForm of myFormArray.controls [formGroup]="patientForm ">
...all your code under tag form that you had before...
</div>

而在 ngOnInit 中

this.myFormArray.push(this.newPatient())

每个新的patien只需要像ngOnInit一样进行推动。删除简单使用

this.myFormArray.removeAt(i)

Answer 2

您可以在单独的组件(患者组件(中使用"患者"窗体并重复该组件。像这样的东西

<ng-container  *ngFor="let patient in patientList"
<patient-component [patientData]="patient" ><patient-component>
<ng-container>

患者数据将是表单数据。