我已经开始使用Todd的反应形式教程：
https://toddmotto.com/angular-dynamic-components-forms#dynamicformmodule
然后我尝试添加一些嵌套组...所以我按如下方式扩展配置：
<build>
<finalName>integrador-compass</finalName>
<pluginManagement>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<version>1.5.6.RELEASE</version>
<configuration>
<layout>MODULE</layout>
</configuration>
</plugin>
</plugins>
</pluginManagement>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.6.0</version>
<configuration>
<source>${maven.compiler.source}</source>
<target>${maven.compiler.target}</target>
<encoding>${project.build.sourceEncoding}</encoding>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-shade-plugin</artifactId>
<version>2.3</version>
<configuration>
<createDependencyReducedPom>false</createDependencyReducedPom>
</configuration>
<executions>
<execution>
<phase>package</phase>
<goals>
<goal>shade</goal>
</goals>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.pitest</groupId>
<artifactId>pitest-maven</artifactId>
<version>1.1.11</version>
<configuration>
<targetClasses>
<param>com.fenix.*</param>
</targetClasses>
<excludedClasses>
<excludedClasse>com.fenix.handler.request*</excludedClasse>
<excludedClasse>com.fenix.handler.response*</excludedClasse>
<excludedClasse>com.fenix.model*</excludedClasse>
</excludedClasses>
<avoidCallsTo>
<avoidCallsTo>java.util.logging</avoidCallsTo>
<avoidCallsTo>org.apache.log4j</avoidCallsTo>
<avoidCallsTo>org.slf4j</avoidCallsTo>
<avoidCallsTo>org.apache.commons.logging</avoidCallsTo>
</avoidCallsTo>
<timestampedReports>false</timestampedReports>
<outputFormats>
<outputFormat>XML</outputFormat>
<outputFormat>HTML</outputFormat>
</outputFormats>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.16</version>
<configuration>
<includes>
<include>**/*Tests.java</include>
<include>**/*Test.java</include>
</includes>
</configuration>
</plugin>
</plugins>
<extensions>
<extension>
<groupId>org.springframework.build</groupId>
<artifactId>aws-maven</artifactId>
<version>5.0.0.RELEASE</version>
</extension>
</extensions>
</build>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.3.0.RELEASE</version>
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
<exclusions>
<exclusion>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-logging</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.springframework.ws</groupId>
<artifactId>spring-ws-core</artifactId>
</dependency>
<dependency>
<groupId>com.fenix</groupId>
<artifactId>compass-api</artifactId>
<version>0.0.15</version>
</dependency>
<dependency>
<groupId>com.fenix</groupId>
<artifactId>lambda-commons</artifactId>
<version>1.6.2</version>
</dependency>
<dependency>
<groupId>commons-validator</groupId>
<artifactId>commons-validator</artifactId>
<version>1.5.1</version>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.mockito</groupId>
<artifactId>mockito-core</artifactId>
<version>2.6.2</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.assertj</groupId>
<artifactId>assertj-core</artifactId>
<version>3.6.2</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.mashape.unirest</groupId>
<artifactId>unirest-java</artifactId>
<version>1.4.9</version>
</dependency>
</dependencies>
然后我将我的新表单组添加到现有表单组（手动，仅用于测试）：
public config = [
{
type: 'input',
...
},
{
type: 'select',
...
},
{
type: 'group',
label: 'testgroup',
name: 'testgroup',
children: [
{
type: 'input',
label: 'test',
name: 'test',
placeholder: 'Enter your name'
}
],
}
];
之后我添加一个新的formGroup组件：
@Component({
selector: 'app-dynamic-form',
exportAs: 'dynamicForm',
template: `
<form
class="form"
[formGroup]="form">
<ng-container
*ngFor="let field of config;"
appDynamicField
[config]="field"
[group]="form">
</ng-container>
</form>
`,
styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {
@Input() config: any[] = [];
public form: FormGroup;
get value() { return this.form.value; }
constructor(private _fb: FormBuilder) {}
ngOnInit() {
this.form = this.createGroup();
}
// i loop over the configuration object and create a new control for each item
private createGroup() {
const group = this._fb.group({});
this.config.forEach((control) => {
if (control.type !== 'group') {
group.addControl(control.name, this._fb.control(null));
} else {
const nested = this._fb.group({});
nested.addControl('test', this._fb.control(null));
group.addControl('testgroup', nested);
}
});
return group;
}
}
并更改dynamicField指令
@Component({
selector: 'app-form-group',
styleUrls: ['form-group.component.css'],
template: `
<div class="form-group" [formGroup]="group">
<label>{{ config.label }}</label>
<ng-container
*ngFor="let field of config.children"
appDynamicField
[config]="field"
[group]="form">
</ng-container>
</div>
`
})
export class FormGroupComponent {
config;
group: FormGroup;
}
但我无法让它正常工作。
错误：
const components = {
input: FormInputComponent,
select: FormSelectComponent,
group: FormGroupComponent
};
@Directive({
selector: '[appDynamicField]'
})
export class DynamicFieldDirective implements OnInit {
@Input() config: any;
@Input() group: FormGroup;
component: any;
constructor(
private _resolver: ComponentFactoryResolver,
private _container: ViewContainerRef
) {}
ngOnInit() {
const component = components[this.config.type];
const factory = this._resolver.resolveComponentFactory<any>(component);
this.component = this._container.createComponent(factory);
this.component.instance.config = this.config;
this.component.instance.group = this.group;
}
}
{{form.value | json}}模型看起来不错......但似乎嵌套的组项没有正确链接到模型...输入不会更新模型。
formGroup expects a FormGroup instance. Please pass one in.