Question

给出一个如下所示的表单声明：

    this.form = this.fb.group({
        party: this.fb.group({
            name: [null, Validators.required],
            givenName: [null, Validators.required],
            surname: [null, Validators.required],
            address: [""],
        }),
        role: this.fb.group({
            mobile: [""],
            landline: [""],
            email: [null, (c: AbstractControl) => {
                if (!c.value)
                    return null;
                return Validators.email(c);
            }],
        })
    });

我想将party表单组与验证/ html等一起移动到新组件。

初始化this.form.party的正确方法是什么，但将其传递给将创建字段和验证器的子组件。

export class PartyDetailsComponent implements OnInit {
    @Input group: FormGroup; // somehow created in the parent control?

    constructor(
        private readonly fb: FormBuilder,
        private readonly logger: NGXLogger) {
    }

    ngOnInit() {
        // how would I assign this correctly to the parent `party`
        this.fb.group({
            name: [null, Validators.required],
            givenName: [null, Validators.required],
            surname: [null, Validators.required],
            address: [""],
        });
    };
}

Answer 1

我这样做的一种方法是在子表单组件中使用@Output并在更改时发出表单。

使用这种方法，您的聚会表单可以单独使用，也可以与任何其他表单一起使用。它为表单提供了很好的重用能力。你可以把它们放在模态中，在页面上使用等等。

<强>模板：

<party-form [data]="someInitialValue" (onChange)="form.get('party').patchValue($event)"></party-form>

<强>组件：

export class PartyFormComponent implements OnInit {
    @Output() onChange: EventEmitter<FormGroup> = new EventEmitter();

    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = fb.group({});

        // On change of form values, emit the onChange event again.
        this.form.valueChanges.subscribe(() => this.onChange.emit(this.form));
    }

    @Input()
    set data(data: Party) {
        if (data) {
            this.form.patchValue(data);
        }
    }

    ngOnInit() {
        // Emit onChange for the first time.
        this.onChange.emit(this.form);
    }
}

以角度5将部分反应形式卸载到子组件的正确方法

1 个答案: