>

템플릿 기반 양식을 사용하고 있습니다.

부모 구성 요소 HTML

<form #BasicForm="ngForm" (ngSubmit)="onBasicDetailsSubmit()" id="BasicForm">
  <app-input-text [(sharedVar)]="dashboardDetails.Text1" [isMandatory]="true" ></app-input-text>
  <app-input-text [(sharedVar)]="dashboardDetails.Text2" [isMandatory]="false"></app-input-text>
  <input type="submit" value="Save" [disabled]="!BasicForm.valid" class="btn btn-success">
</form>

자식 구성 요소

TS

@Input() sharedVar: number;
@Input() isMandatory: boolean;
@Output() sharedVarChange = new EventEmitter();

change(newValue) {
  this.sharedVar = newValue;
  this.sharedVarChange.emit(newValue);
}

HTML

<input type="text" class="form-control" [(ngModel)]="sharedVar" (ngModelChange)="change($event)" [attr.required]="isMandatory">

제출 버튼이 비활성화되지 않습니다. 나는 required 쓰기를 시도했습니다  부모 구성 요소 선택기뿐만 아니라 자식 구성 요소에서도 작동하지만 작동하지 않습니다. 도와주세요.

  • 답변 # 1

    Template-Driven-Form 를 사용하면서 , Child components 를 확인하는 가장 좋은 방법   custom-Directive 를 만드는 것입니다 이렇게하면 Child-Component-Form에서 확인할 각 필드에 항상 추가 할 수 있습니다.

    이것을 사용할 수 있습니다 :

    import {Directive, OnInit} from '@angular/core';
    import {NgControl, NgForm, NgModel} from "@angular/forms";
    /**
     * This attribute directive must be used to each input-field of a childComponent.
     * That input-field must contain a NgModel attribute, else the application must throw an error
     * Usage: (<input class="form-control" type="text" registerChildComponentToForm
     *          [(ngModel)]="testname" name="testname" required />
     */
    @Directive({
        selector: '[registerChildComponentToForm]',
        providers: [NgModel]
    })
    export class RegisterTemplateFormModelDirective implements OnInit {
        constructor(private form: NgForm, private eltControl: NgControl) {
        }
        ngOnInit() {
            if (this.form && this.eltControl) {
                this.form.form.addControl(this.eltControl.name, this.eltControl.control);
            }
        }
    }
    
    

    그런 다음 declarations 에 등록하십시오.  그리고 exports  당신의 App-Module 에서

    declarations: [
            RegisterTemplateFormModelDirective,
            ...
    ],
    exports: [
            RegisterTemplateFormModelDirective,
            ...
    ]
    
    

    당신의 <app-input-text> 를 제공  이 HTML 입니까  코드를 입력하면 directive 를 사용해야합니다. (와이즈 와이즈) ) 이렇게 :

    registerChildComponentToForm
    
    

  • 답변 # 2

    부모 구성 요소 HTML

    <input id="iban" name="iban" [(ngModel)]="bank.iban" #ibanRef="ngModel" 
      [required]="isMandatory" registerChildComponentToForm/>
    
    

    부모 구성 요소 TS

    <app-input-text [(sharedVar)]="dashboardDetails.Text1" (sharedVarChange)="sharedVarChangeHandle($event)" ...
    
    

    부모 구성 요소 HTML

    sharedVarChangeHandle($event) {
        // by evaluating the value passed you can update a variable (ex: disableSubmit)
    }
    
    

  • 답변 # 3

    자식 구성 요소 ts

    <input type="submit" value="Save" [disabled]="!disableSubmit" class="bt .....
    
    

    valid // this is a public variable change(newValue) { this.sharedVar = newValue; this.sharedVarChange.emit(newValue); // here conditioanally update the **valid** variable (true or false) }

관련 자료

  • 이전 활동이 작동하지 않는 Android의 OnOptionsItemSelected
  • 다음 python - Anaconda에서 pip없이 fix_yahoo_finance 설치