angular - Mat-Input 在初始化时显示错误轮廓

Question

我在这里疯了。我有一个儿童数组，每当有人点击添加儿童时，arr 都会填充 children[i] 新表单控件和验证。

问题是最初生成到 dom 的输入带有错误大纲。

模板 `

<!-- Itr over children's arr -->
<ng-container *ngFor="let iteration of children; let i=index">

    <!-- display children's inputs by itr -->
    <mat-form-field appearance="outline" class="input-h-md gr-sm-full"
        *ngFor="let children of getInputsForIterations(iteration); let t = index">
        <mat-label>
            <span>{{ children.req }}</span>
            {{ children.label | translate }}
        </mat-label>
        <input [id]="children.id" [name]="children.id"                                
            [formControlName]="children.id" [type]="children.type" matInput >
   
    </mat-form-field>

    <!-- RemoveChild by itr -->
    <button color="warn" class="gr-span2 m-0 remove-btn"
        (click)="removeChild(i)" mat-button>
        <mat-label>
            {{'FORM101.removeChild' | translate}}
        </mat-label>
        <mat-icon>delete</mat-icon>
    </button>

     <!-- CheckBox by itr -->
    <mat-checkbox [class]="'itr' + t"
        *ngFor="let children of getInputsForIterations(iteration, true); let t = index"
        [formControlName]="children.id"
        [appDisableControl]="t === 4 && !this.section3Form.get(iteration[t-1].id).value"
        (change)="isHeldChange($event, children.id)" [name]="children.id">
        {{children.label | translate}}
    </mat-checkbox>

    <div class="hr fullspan"></div>
</ng-container>

<!-- AddChild by itr -->

<ng-container *ngIf="childrenI < 13">
    <button class="gr-span2 mt-2 mb-2 mr-0 ml-0" color="primary"
        (click)="addChild()" mat-raised-button>
        <mat-label>
            {{'FORM101.addChild' | translate}}
        </mat-label>
        <mat-icon>add</mat-icon>
    </button>
</ng-container>

`

TS

export class Tofes101section3Component implements OnInit {
@Input() section3Form: FormGroup;
inputs: any;
children: Array<Array<ChildrenInterface>> = [];
childrenI = 0;
errorMsgs = errorMessages;
formControlArr = [];
today: string;
getMostImportantError = this.errorService.getMostImportantError;
maxAgeAllow: string;
matcher = new MyErrorStateMatcher();


constructor(
    private errorService: ErrorService,
    private formBuilderService: FormBuilderService,
    private initialValueService: InitialValueService
) { }
ngOnInit(): void {
    this.setTodaysDate();
    for (const child of this.initialValueService.children) {
        this.addChild(false);
        for (const prop in child) {
            const value = prop.includes('DOB') ? (child[prop].substr(4) + '-' + child[prop].substr(2, 2) + '-' + child[prop].substr(0, 2)) : child[prop];
            this.section3Form.get(prop).setValue(value);
        }
    }
}

isHeldChange(event: MatCheckboxChange, id: string) {
    if (id.includes('Disabl')) { return; }
    const childNum = event.source.name.substr(5, 1);
    this.section3Form.get(`child${childNum}Allowance`).setValue(event.checked ? this.section3Form.get(`child${childNum}Allowance`).value : null);
}

getInputsForIterations(iterations: Array<any>, isCheckbox: boolean = false) {
    return iterations.filter(i => isCheckbox ? i.type === 'checkbox' : i.type !== 'checkbox');
}

setTodaysDate() {
    const today = new Date();
    const dd = String(today.getDate()).padStart(2, '0');
    const mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
    const yyyy = today.getFullYear();
    this.today = `${yyyy}-${mm}-${dd}`;
    this.maxAgeAllow = `${yyyy - 19}-${mm}-${dd}`;
}

addChild(needNewControl = true) {
    // check The iteraion Number and saves it
    this.childrenI++;
    // pushes data according to Iteration
    this.children.push([
        {
            id: `child${this.childrenI}Name`,
            type: 'text',
            class: 'form-control ',
            label: 'childName',
            validations: [
                Validators.required,
                this.formBuilderService.hebrewOnly,
                this.formBuilderService.minNameLength,
            ],
        },
        {
            id: `child${this.childrenI}ID`,
            type: 'text',
            class: 'form-control ',
            label: 'idNumber',
            validations: [
                Validators.required,
                this.formBuilderService.idNumber,
                this.formBuilderService.idNumberCheck,
                this.formBuilderService.digitsOnly,
            ],
        }


    ]);

    if (needNewControl) {
        this.addFormControl();
    } else {
        this.setControlValidator();
    }
}

setControlValidator() {
    const arr = [];
    // loops throgh children nested Arr and destructure
    for (let i = 0; i < this.children.length; i++) {
        arr.push(...this.children[i]);
    }

    // Loops childrenId an Create Controler
    for (let i = 0; i < arr.length; i++) {
        this.section3Form.get(arr[i].id)
            .setValidators(arr[i].validations);
    }

}

addFormControl() {
    const arr = [];
    // loops throgh children nested Arr and destructure
    for (let i = 0; i < this.children.length; i++) {
        arr.push(...this.children[i]);
    }

    // Loops childrenId an Create Controler
    for (let i = 0; i < arr.length; i++) {
        if (!this.section3Form.get(arr[i].id)) {
            this.section3Form.addControl(
                arr[i].id,
                new FormControl(null, [])
            );
        }
    }

    for (let i = 0; i < arr.length; i++) {
        this.section3Form.get(arr[i].id).setValidators(arr[i].validations);
        this.section3Form.get(arr[i].id).updateValueAndValidity();            
    }

}

// returns filterd Array to DOM
childrenArrayFilter(text) {
    let newChildrenArr = [];
    if (text === 'filterCheckbox') {
        for (let i = 0; i < this.children.length; i++) {
            return (newChildrenArr = this.children[i].filter(
                (data) => data.type !== 'checkbox'
            ));
        }
    } else {
        for (let i = 0; i < this.children.length; i++) {
            return (newChildrenArr = this.children[i].filter(
                (data) => data.type === 'checkbox'
            ));
        }
    }
}

removeChild(i) {
    this.childrenI--;
    for (const control of this.children[i]) {
        this.section3Form.removeControl(control.id);
    }
    this.children.splice(i, 1);
}

}

状态

我觉得我错过了一些愚蠢的东西，但我放弃了！帮助将不胜感激。

标签： angularangular-material