typescript - Angular 8: Markera formulär som berört från föräldrakomponent

Hur deklarerar jag ett barnkomponentformulär som markerat som berört från en föräldrakomponent?

För närvarande har vi i barnkomponenten en ingångsvariabel och ngOnChanges som fungerar

@Input public markFormTouchedFlag: boolean

if (this.markFormTouchedFlag) { 
    this.addressform.markAllAsTouched();
}

Nyfiken på om det finns ett mer effektivt sätt att markera ett formulär i en barnkomponent (addressform) som berört från en föräldrakomponent?

Kanske borde göra frågan mer generell, hitta formvaliditet, markera som oredigerad, men jag kommer att hålla mig till den första frågan endast.

Svar #1

Du kan göra detta på ett mer improviserat sätt om du behöver skicka samma variabel ("markFormTouchedFlag") till flera komponenter kan du använda denna metod. Denna metod lagrar data i observable och genom att prenumerera på detta kommer variabeln automatiskt att uppdateras varhelst den används.

skapa tjänst för att lagra data:

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class FlagService {
    private subject = new Subject<any>();

    updateFlag(flag: bool) {
        this.subject.next({ flag: flag });
    }

    setFlag() {
        this.subject.next();
    }

    getFlag(): Observable<any> {
        return this.subject.asObservable();
    }
}

skapa föräldrakomponent:

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

import { FlagService } from '../services/FlagService.service';

@Component({
    selector: 'app',
    templateUrl: 'app.component.html'
})

export class AppComponent implements OnDestroy {
    flag: any;
    subscription: Subscription;

    constructor(private flagService: FlagService) {}

    setFlag(): void {
     this.flagService.setFlag(flag);
   }

   clearFlag(): void {
       this.messageService.clearMessage();
   }
}

I denna komponent (föräldrakomponent) har vi två funktioner: set och clear flag. Setflag-funktionen används för att sätta värdet i tjänsten. När det har satts i tjänstelagret kommer det att uppdateras överallt där värdet är prenumererat. clearFlag-funktionen används för att sätta variabeln till ett null-värde.

barnkomponent:

import { Component } from '@angular/core';

import { FlagService } from '../services/FlagService.service';

@Component({ templateUrl: 'home.component.html' })
export class HomeComponent {
    
 flag: any;
 subscription: Subscription;

 constructor(private flagService: FlagService) {
     this.subscription = this.flagService.getFlag().subscribe(flag => { this.flag = flag; });
 }

 ngOnDestroy() {
     this.subscription.unsubscribe();
 }

Genom detta kan du hämta värdet från observable; när flaggan ändras i tjänsten uppdateras den automatiskt i barnkomponenten när den ändras i föräldrakomponenten och den sätts till flaggan i komponenten på grund av prenumerationen som gjorts i konstruktorn.

när komponenten förstörs avregistrerar vi oss för värdet.