폼구성을 위한 객체모델을 만들어 놓고 템플릿을 구성해둔 뒤에 개별 폼을 빠르게 자동으로 생성하는 방법
객체모델의 폼템플릿구성이 변하는 경우 빠르게 대응할 수 있으며 어플리케이션 코드를 수정하지 않고도 폼템플릿을 변경하여 유연성이 좋아진다.
반응형폼모듈을 사용하고 폼을 구성하는 폼엘리먼트를 위한 객체모델을 만들어야 한다.
export class QuestionBase<T>{
value:T | undefined;
key:string;
label:string;
required:boolean;
order:number;
controlType:string;
type:string;
options:{key:string,value:string}[];
constructor(options:{
value?:T,
key:string,
label?:string,
required?:boolean,
order?:number,
controlType?:string,
type?:string,
options?:{key:string,value:string}[]
}){
this.value = options.value;
this.key = options.key || '';
this.label = options.label || '';
this.required = !!options.required;
this.order = options.order || 1;
this.controlType = options.controlType || '';
this.type = options.type || '';
this.options = options.options || [];
}
}하나의 폼콘트롤을 설정하는 객체모델을 만든다.
@Injectable()
export class QuestionFormgroupService {
toFormGroup(questions:QuestionBase<string>[]):FormGroup{
const formObj:any={};
questions.forEach(question=>{
formObj[question.key] = question.required? new FormControl(question.value,Validators.required):
new FormControl(question.value);
});
return new FormGroup(formObj);
}
constructor() { }
}기본 객체모델을 사용해 필요한 모델들로부터 최종 폼콘트롤들로 구성된 폼그룹을 만든다.
폼콘트롤하나를 랜더링하는 컴포넌트를 만들어야 하고 랩핑하는 컴포넌트를 만들어서 사용한다.
