<div class="form-group" *ngFor="let output of outputs">
<label for="exampleFormControlTextarea1">{{output.name}}
<i [hidden]="output.required"
- class="icon-required-star optional-attribute" type="button"
+ class="icon-required-star" type="button"
aria-hidden="true"></i>
- <i [hidden]="output.required" class="optional-attribute"
+ <i [hidden]="!output.required" class="optional-attribute"
type="button" aria-hidden="true"></i>
+
</label>
</div>
</div>
<button type="button" class="list-group-item list-group-item-action"
(click)="setInputType('Other')">Other
</button>
-
</div>
+ <input [hidden]="!isInputOtherType" type="text" class="form-control mt-2 mb-2"
+ id="inputPassword4"
+ placeholder="Add Other type name"
+ [(ngModel)]="inputOtherType" (change)="setInputType(inputOtherType)">
+
</div>
</div>
<div class="form-group row">
Other
</button>
</div>
- <input type="text" class="form-control mt-2 mb-2" id="inputPassword3"
- placeholder="Add Other type name">
+ <input [hidden]="!isOutputOtherType" type="text" class="form-control mt-2 mb-2"
+ id="inputPassword3"
+ placeholder="Add Other type name"
+ [(ngModel)]="outputOtherType" (change)="setOutputType(outputOtherType)">
</div>
</div>
<div class="form-group row">
actionAttributesSideBar: boolean;
inputActionAttribute = new InputActionAttribute();
outputActionAttribute = new OutputActionAttribute();
+ isInputOtherType: boolean;
+ isOutputOtherType: boolean;
+ outputOtherType = '';
+ inputOtherType = '';
constructor() {
ngOnInit() {
}
- _toggleSidebar2() {
- this.actionAttributesSideBar = !this.actionAttributesSideBar;
- }
-
addInput(input: InputActionAttribute) {
- this.inputs.push(input);
+ if (input && input.type && input.name) {
+ const insertedInputActionAttribute = Object.assign({}, input);
+ this.inputs.push(insertedInputActionAttribute);
+ }
}
addOutput(output: OutputActionAttribute) {
- this.outputs.push(output);
+ if (output && output.type && output.name) {
+ const insertedOutputActionAttribute = Object.assign({}, output);
+ this.outputs.push(insertedOutputActionAttribute);
+ }
}
- setInputType(type) {
+ setInputType(type: string) {
this.inputActionAttribute.type = type;
+ this.isInputOtherType = this.checkIfTypeIsOther(type);
}
setInputRequired(isRequired) {
this.outputActionAttribute.required = isRequired;
}
- setOutputType(type) {
+ setOutputType(type: string) {
this.outputActionAttribute.type = type;
+ this.isOutputOtherType = this.checkIfTypeIsOther(type);
+ }
+
+ checkIfTypeIsOther(type) {
+ return type.includes('Other');
}
submitAttributes() {
console.log(this.inputActionAttribute);
console.log(this.outputActionAttribute);
- this.inputs.push(this.inputActionAttribute);
- this.outputs.push(this.outputActionAttribute);
+ this.addInput(this.inputActionAttribute);
+ this.addOutput(this.outputActionAttribute);
+ this.clearFormInputs();
+ }
+
+ private clearFormInputs() {
+ this.inputActionAttribute = new InputActionAttribute();
+ this.outputActionAttribute = new OutputActionAttribute();
+ this.outputOtherType = '';
+ this.inputOtherType = '';
}
}