我在Angular 6中有一个反应式表单。我想从该表单中获取输入的数据，并在另一个组件视图中填充一个表。这更多是一个如何质疑？到目前为止，我的代码看起来像这样：表单需要以某种方式填充表。请原谅表单字段可能不匹配表字段，就像我说的那样，我正在从开发的角度看这是如何完成的。
表格.html
<!--Form-->
<form class="form-horizontal" [formGroup]="serviceForm" (ngSubmit)="serviceForm.value()">
<div class="form-group mb-8">
<div class="col-3 col-sm-12">
<label class="form-label" for="u_caller_id">On behalf of this user: <sub class="text-secondary">*</sub></label>
</div>
<div class="col-4 col-sm-12">
<select formControlName="u_caller_id" class="form-select" required>
<option *ngFor="let user of users" [ngValue]="user">
{{ user.id }}
</option>
</select>
<div *ngIf="serviceForm.get('u_caller_id').errors && (serviceForm.get('u_caller_id').touched || serviceForm.get('u_caller_id').dirty)">
<div *ngIf="serviceForm.get('u_caller_id').hasError('required')" class="mt-2 mb-2">
<h6 class="text-error">This field is required</h6>
</div>
</div>
</div>
</div>
<div class="form-group mb-8">
<div class="col-3 col-sm-12">
<label class="form-label" for="u_destination_country">Your location: <sub class="text-secondary">*</sub></label>
</div>
<div class="col-4 col-sm-12">
<select formControlName="u_destination_country" class="form-select">
<option *ngFor="let state of countries" [ngValue]="state">
{{ state.name }}
</option>
</select>
<div *ngIf="serviceForm.get('u_destination_country').errors && (serviceForm.get('u_destination_country').touched || serviceForm.get('u_destination_country').dirty)">
<div *ngIf="serviceForm.get('u_destination_country').hasError('required')" class="mt-2 mb-2">
<h6 class="text-error">This field is required</h6>
</div>
</div>
</div>
</div>
<div class="form-group mb-8">
<div class="col-3 col-sm-12">
<label class="form-label" for="u_requester_phone_number">Phone number: <sub class="text-secondary">*</sub></label>
</div>
<div class="col-4 col-sm-12">
<input class="form-input" type="text" id="u_requester_phone_number" placeholder="Enter phone number" type="number"
formControlName="u_requester_phone_number" required>
<div *ngIf="serviceForm.get('u_requester_phone_number').errors && (serviceForm.get('u_requester_phone_number').touched || serviceForm.get('u_requester_phone_number').dirty)">
<div *ngIf="serviceForm.get('u_requester_phone_number').hasError('required')" class="mt-2 mb-2">
<h6 class="text-error">This field is required</h6>
</div>
</div>
</div>
</div>
<div class="form-group mb-8">
<div class="col-3 col-sm-12">
<label class="form-label" for="u_serial_number">Device/Asset: <sub class="text-secondary">*</sub></label>
</div>
<div class="col-4 col-sm-12">
<select formControlName="u_serial_number" class="form-select" required>
<option *ngFor="let device of devices" [ngValue]="device">
{{ device.id }}
</option>
</select>
<div *ngIf="serviceForm.get('u_serial_number').errors && (serviceForm.get('u_serial_number').touched || serviceForm.get('u_serial_number').dirty)">
<div *ngIf="serviceForm.get('u_serial_number').hasError('required')" class="mt-2 mb-2">
<h6 class="text-error">This field is required</h6>
</div>
</div>
</div>
</div>
<div class="form-group mb-8">
<div class="col-3 col-sm-12">
<label class="form-label" for="subject">Subject: <sub class="text-secondary">*</sub></label>
</div>
<div class="col-4 col-sm-12">
<input class="form-input" type="text" id="subject" placeholder="Enter subject" type="text" formControlName="subject"
required>
<div *ngIf="serviceForm.get('subject').errors && (serviceForm.get('subject').touched || serviceForm.get('subject').dirty)">
<div *ngIf="serviceForm.get('subject').hasError('required')" class="mt-2 mb-2">
<h6 class="text-error">This field is required</h6>
</div>
</div>
<h6 class="text-gray mt-2">Please note maximum length is 80 characters.</h6>
</div>
</div>
<div class="form-group mb-8">
<div class="col-3 col-sm-12">
<label class="form-label" for="describe">Please describe your issue:</label>
</div>
<div class="col-4 col-sm-12">
<textarea class="form-input" id="describe" placeholder="Describe your issue" rows="3" formControlName="issue"></textarea>
<h6 class="text-gray mt-2">The more information you can provide here, the easier time the organization will
have in diagnosing and resolving your issue.</h6>
</div>
</div>
<div class="columns col-12 col-sm-12">
<div class="column col-10 col-sm-6 text-right">
<button class="btn btn-link">Cancel</button>
</div>
<div class="column col-2 col-sm-6">
<a routerLink="/incident"><button class="btn btn-primary" type="submit" [disabled]="!serviceForm.valid">Submit</button></a>
</div>
</div>
</form>
<!-- form -->
.ts文件格式
@Component({
selector: 'app-service-request',
templateUrl: './service-request.component.html',
styleUrls: ['./service-request.component.scss']
})
export class ServiceRequestComponent implements OnInit {
serviceForm;
countries = [
{name: 'Choose an option'},
{name: 'United Kingdom',},
{name: 'United States of America',},
{name: 'Russia',},
{name: 'Moscow',},
{name: 'Africa',},
];
users = [
{id: 'Select an option',},
{id: '1',},
{id: '2',},
{id: '3',},
];
devices = [
{id: 'Select an option',},
{id: '1',},
{id: '2',},
{id: '3',},
];
constructor() { }
ngOnInit() {
this.serviceForm = new FormGroup({
u_caller_id: new FormControl(this.users[0], Validators.required),
u_destination_country: new FormControl(this.countries[0], Validators.required),
u_requester_phone_number: new FormControl('', Validators.required),
u_serial_number: new FormControl(this.devices[0], Validators.required),
subject: new FormControl('', Validators.compose([
Validators.required,
Validators.minLength(5),
Validators.maxLength(10)
])),
issue: new FormControl('', Validators.required),
});
}
onSubmit(serviceForm) {
console.log("Service form submitted");
}
}
table.html
<table class="table table-striped table-hover mb-10">
<thead>
<tr>
<th>Serial Number</th>
<th>Product</th>
<!--<th>Building</th>-->
<th>Floor</th>
<th>Address Line 1</th>
<th>Postal code</th>
</tr>
</thead>
<tbody>
<tr class="" *ngFor="let incident of incidents">
<td><input type="radio" name="gender">
<i class="form-icon mr-5"></i>{{incident.u_serial_number}}</td>
<td>{{incident.u_product_name}}</td>
<td>{{incident.u_address_floor}}</td>
<td>{{incident.u_address_line_1}}</td>
<td>{{incident.u_address_post_code}}</td>
</tr>
</tbody>
</table>
table.ts
@Component({
selector: 'app-service-incident',
templateUrl: './service-incident.component.html',
styleUrls: ['./service-incident.component.scss']
})
export class ServiceIncidentComponent implements OnInit {
incident = [
{u_serial_number: 'E745K100200', u_product_name: 'MP2355 Black and white', u_address_floor: '2', u_address_line_1: '11 Rue De Cambrai', u_address_post_code: '75019'},
{u_serial_number: 'E745K100200', u_product_name: 'MP2355 Black and white', u_address_floor: '2', u_address_line_1: '11 Rue De Cambrai', u_address_post_code: '75019'},
{u_serial_number: 'E745K100200', u_product_name: 'MP2355 Black and white', u_address_floor: '2', u_address_line_1: '11 Rue De Cambrai', u_address_post_code: '75019'},
{u_serial_number: 'E745K100200', u_product_name: 'MP2355 Black and white', u_address_floor: '2', u_address_line_1: '11 Rue De Cambrai', u_address_post_code: '75019'},
{u_serial_number: 'E745K100200', u_product_name: 'MP2355 Black and white', u_address_floor: '2', u_address_line_1: '11 Rue De Cambrai', u_address_post_code: '75019'},
{u_serial_number: 'E745K100200', u_product_name: 'MP2355 Black and white', u_address_floor: '2', u_address_line_1: '11 Rue De Cambrai', u_address_post_code: '75019'},
];
incidents=this.incident;
constructor(private service: ServicenowService) {
}
ngOnInit() {
this.service.getAll().subscribe((data) => {
console.log('Result - ', data);
})
}
}
答案 0 :(得分：0)
我会使用一个主题来完成这项任务 在服务内部创建一个新服务（使用cli data服务）
import { Subject } from 'rxjs';
dataSubj:Subject<any> = new Subject()
form.ts：
constructor(private dataS: dataService){}
onSubmit(serviceForm) {
console.log("Service form submitted");
this.dataS.dataSubj.next(this.serviceForm.value)
}
在表格组件内部：
constructor(private dataS: dataService){}
ngOninit(){
this.dataS.formComponent.datasubj.subscribe(res=>{
console.log(res)
//add res to the table
})
}
希望这有助于开始