angular - 自定义输入角度/反应形式
问题描述
我正在使用有角材料的步进器,我不确定如何最好地为这个步进器的每个步骤制作一个组件。
因为我在共享表格上有很多困难。我想知道做到这一点的最佳方法。
在 stepper 的主要组件中,获取每个 step 的值,最后用 step 的 3 种形式发布一个帖子。如您所见,代码已经变得太大了,因此理想的做法是为每个步骤制作一个组件
Componente TS
companyInfo!: FormGroup;
contactInfo!: FormGroup;
selectedType: boolean = false;
constructor(public fb: FormBuilder) { }
ngOnInit(): void {
this.initCompanyInfo();
this.initContactInfo();
console.log(this.companyInfo.get('industry')?.value)
}
initCompanyInfo(){
this.companyInfo = this.fb.group({
companyName: ['', Validators.required],
industry: ['', Validators.required],
country: ['', Validators.required],
})
}
initContactInfo() {
this.contactInfo = this.fb.group({
contact: this.fb.array([this.createContact])
})
}
createContact(): FormGroup {
return this.fb.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
position: ['', Validators.required],
email: ['', Validators.required],
confirmEmail: ['', Validators.required],
password: ['', Validators.required],
confirmPassword: ['', Validators.required],
phoneNumber: ['', Validators.required],
})
}
<mat-horizontal-stepper [labelPosition]="'bottom'" linear>
<mat-progress-bar [value]=progressValue></mat-progress-bar>
<!-- STEP 1 -->
<mat-step label="COMPANY INFORMATION">
<mat-card>
<div class="card-header">
<p>Company Info</p>
<button mat-raised-button matStepperNext (click)="additionProgress()">Next</button>
</div>
<mat-card-content>
<form [formGroup]="companyInfo">
<div class="main-right">
<div class="header-section">
<span>STATE</span>
</div>
<div class="form">
<mat-form-field class="width6" appearance="outline">
<mat-label>COUNTRY</mat-label>
<input matInput formControlName="country">
<mat-error></mat-error>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>STATE</mat-label>
<input matInput formControlName="state">
<mat-error></mat-error>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>CITY</mat-label>
<input matInput formControlName="city">
<mat-error></mat-error>
</mat-form-field>
<mat-form-field class="width6" appearance="outline">
<mat-label>ADDRESS</mat-label>
<input matInput formControlName="address">
<mat-error></mat-error>
</mat-form-field>
<mat-form-field class="width8" appearance="outline">
<mat-label>ZIPCODE</mat-label>
<input matInput type="number" formControlName="zipcode">
<mat-error></mat-error>
</mat-form-field>
</div>
</div>
</div>
<div class="main-form">
<div class="main-left">
<div class="header-section">
<span>COMPANY</span>
</div>
</div>
</div>
</div>
</form>
</mat-card-content>
</mat-card>
</mat-step>
<!-- STEP 2 -->
<mat-step label="CONTACT INFORMATION">
<p>Opa2</p>
<button mat-raised-button matStepperPrevious (click)="subtractionProgress()">Previous</button>
<button mat-raised-button matStepperNext (click)="additionProgress()">Next</button>
</mat-step>
<!-- STEP 3 -->
<mat-step label="GENERAL INFORMATION">
<p>Opa3</p>
<button mat-raised-button matStepperPrevious (click)="subtractionProgress()">Previous</button>
</mat-step>
</mat-horizontal-stepper>
解决方案
您可以使用 SERVICE 和 BehaviorSubject 在多个组件之间共享 FormGroup 对象...查看 stackblitz 上的以下演示...
推荐阅读
- arduino - Arduino将代码上传到esp8266 nodemcu时出错
- azure-data-lake - Visual Studio 表格模型到数据湖
- r - Quantmod 一个pdf中的多个图表
- javascript - 如何从 URL 获取文件元数据
- javascript - 将 JSON 文件从数据库解析为 JavaScript 的问题
- google-cloud-platform - 您可以通过 GDM 将更改传播到多个项目吗?
- python - 浮动表示的差异
- sql - 将 Count 与 Case 表达式一起使用
- r - 休息之间的空间均匀 - ggplot2
- wordpress - 如何为 wordpress 创建子插件