diff --git a/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.less b/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.less
index a4d26c668b4..65cf2020706 100644
--- a/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.less
+++ b/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.less
@@ -1,10 +1,8 @@
:host {
::ng-deep {
.ant-collapse-content-box {
- :last-child {
- .ant-form-item {
- margin-bottom: 0!important;
- }
+ .ant-form-item:last-child {
+ margin-bottom: 0!important;
}
}
}
diff --git a/web-app/src/app/shared/components/form-field/form-field.component.html b/web-app/src/app/shared/components/form-field/form-field.component.html
new file mode 100644
index 00000000000..f03ef101b7e
--- /dev/null
+++ b/web-app/src/app/shared/components/form-field/form-field.component.html
@@ -0,0 +1,171 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ 'monitor.collector.system.default' | i18n }}
+ {{ 'collector.mode.public' | i18n }}
+
+
+ {{
+ item.status == 0 ? ('monitor.collector.status.online' | i18n) : ('monitor.collector.status.offline' | i18n)
+ }}
+
+ {{ item.name }}
+ {{ item.ip }}
+
+ {{ item.mode == 'private' ? ('collector.mode.private' | i18n) : ('collector.mode.public' | i18n) }}
+
+
+
+
+ {{ selected.nzLabel }}
+
+
+
+
+
+
+ {{ 'common.time.unit.second' | i18n }}
+
+
+
+
+
+
+
diff --git a/web-app/src/app/shared/components/form-item/form-item.component.less b/web-app/src/app/shared/components/form-field/form-field.component.less
similarity index 100%
rename from web-app/src/app/shared/components/form-item/form-item.component.less
rename to web-app/src/app/shared/components/form-field/form-field.component.less
diff --git a/web-app/src/app/shared/components/form-item/form-item.component.spec.ts b/web-app/src/app/shared/components/form-field/form-field.component.spec.ts
similarity index 80%
rename from web-app/src/app/shared/components/form-item/form-item.component.spec.ts
rename to web-app/src/app/shared/components/form-field/form-field.component.spec.ts
index 581e39d34ec..971578a9d5b 100644
--- a/web-app/src/app/shared/components/form-item/form-item.component.spec.ts
+++ b/web-app/src/app/shared/components/form-field/form-field.component.spec.ts
@@ -19,20 +19,20 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormItemComponent } from './form-item.component';
+import { FormFieldComponent } from './form-field.component';
-describe('FormItemComponent', () => {
- let component: FormItemComponent;
- let fixture: ComponentFixture
;
+describe('FormFieldComponent', () => {
+ let component: FormFieldComponent;
+ let fixture: ComponentFixture;
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [FormItemComponent]
+ declarations: [FormFieldComponent]
}).compileComponents();
});
beforeEach(() => {
- fixture = TestBed.createComponent(FormItemComponent);
+ fixture = TestBed.createComponent(FormFieldComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
diff --git a/web-app/src/app/shared/components/form-field/form-field.component.ts b/web-app/src/app/shared/components/form-field/form-field.component.ts
new file mode 100644
index 00000000000..35da45aacb0
--- /dev/null
+++ b/web-app/src/app/shared/components/form-field/form-field.component.ts
@@ -0,0 +1,81 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms';
+
+@Component({
+ selector: 'app-form-field',
+ templateUrl: './form-field.component.html',
+ styleUrls: ['./form-field.component.less'],
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ multi: true,
+ useExisting: FormFieldComponent
+ },
+ {
+ provide: NG_VALIDATORS,
+ multi: true,
+ useExisting: FormFieldComponent
+ }
+ ]
+})
+export class FormFieldComponent implements ControlValueAccessor, Validator {
+ constructor() {}
+ @Input() item!: any;
+ @Input() extra: any = {};
+
+ value: any;
+ validateStatus!: string;
+
+ _onChange: Function = () => {};
+ _onTouched: Function = () => {};
+
+ writeValue(value: any): void {
+ this.value = value;
+ }
+
+ registerOnChange(fn: Function): void {
+ this._onChange = fn;
+ }
+
+ registerOnTouched(fn: Function): void {
+ this._onTouched = fn;
+ }
+
+ validate(control: AbstractControl): ValidationErrors | null {
+ // if (!(control.dirty) && !(control.touched)) return null;
+ let { value } = control;
+ if (this.item.required && (value === null || value === undefined || value === '')) {
+ this.validateStatus = 'error';
+ return {
+ required: {
+ valid: false
+ }
+ };
+ }
+ this.validateStatus = '';
+ return null;
+ }
+
+ onChange(value: any) {
+ this._onChange(value);
+ }
+}
diff --git a/web-app/src/app/shared/components/form-item/form-item.component.html b/web-app/src/app/shared/components/form-item/form-item.component.html
deleted file mode 100644
index 9d765662879..00000000000
--- a/web-app/src/app/shared/components/form-item/form-item.component.html
+++ /dev/null
@@ -1,227 +0,0 @@
-
-
-
- {{ item.name }}
-
-
-
-
-
-
- {{ item.name }}
-
-
-
-
-
-
- {{ item.name }}
-
-
-
-
-
-
- {{ item.name }}
-
-
-
-
-
-
- {{ item.name }}
-
-
-
-
-
-
- {{ item.name }}
-
-
-
-
-
-
-
-
- {{ item.name }}
-
-
-
-
-
-
- {{ item.name }}
-
-
-
-
-
-
- {{ item.name }}
-
-
-
-
- {{ 'monitor.collector.system.default' | i18n }}
- {{ 'collector.mode.public' | i18n }}
-
-
- {{
- item.status == 0 ? ('monitor.collector.status.online' | i18n) : ('monitor.collector.status.offline' | i18n)
- }}
-
- {{ item.name }}
- {{ item.ip }}
-
- {{ item.mode == 'private' ? ('collector.mode.private' | i18n) : ('collector.mode.public' | i18n) }}
-
-
-
-
- {{ selected.nzLabel }}
-
-
-
-
-
- {{ item.name }}
-
-
-
-
- {{ 'common.time.unit.second' | i18n }}
-
-
-
-
- {{ item.name }}
-
-
-
-
-
-
-
- {{ item.name }}
-
-
-
-
-
-
-
diff --git a/web-app/src/app/shared/components/form-item/form-item.component.ts b/web-app/src/app/shared/components/form-item/form-item.component.ts
deleted file mode 100644
index 5559dce1cd5..00000000000
--- a/web-app/src/app/shared/components/form-item/form-item.component.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
- selector: 'app-form-item',
- templateUrl: './form-item.component.html',
- styleUrls: ['./form-item.component.less']
-})
-export class FormItemComponent {
- constructor() {}
- @Input() item!: any;
- @Input() value!: any;
- @Input() extra: any = {};
- @Output() readonly valueChange = new EventEmitter();
-
- onChange(value: any) {
- this.valueChange.emit(value);
- }
-}
diff --git a/web-app/src/app/shared/shared.module.ts b/web-app/src/app/shared/shared.module.ts
index 3188c585b3b..bea3cd89d07 100644
--- a/web-app/src/app/shared/shared.module.ts
+++ b/web-app/src/app/shared/shared.module.ts
@@ -11,7 +11,7 @@ import { NzRadioComponent, NzRadioGroupComponent } from 'ng-zorro-antd/radio';
import { NzSwitchComponent } from 'ng-zorro-antd/switch';
import { NzTagModule } from 'ng-zorro-antd/tag';
-import { FormItemComponent } from './components/form-item/form-item.component';
+import { FormFieldComponent } from './components/form-field/form-field.component';
import { HelpMessageShowComponent } from './components/help-message-show/help-message-show.component';
import { KeyValueInputComponent } from './components/key-value-input/key-value-input.component';
import { MetricsFieldInputComponent } from './components/metrics-field-input/metrics-field-input.component';
@@ -33,7 +33,7 @@ const COMPONENTS: Array> = [
HelpMessageShowComponent,
MetricsFieldInputComponent,
ToolbarComponent,
- FormItemComponent,
+ FormFieldComponent,
MonitorSelectMenuComponent
];
const DIRECTIVES: Array> = [TimezonePipe, I18nElsePipe, ElapsedTimePipe];