提交角材2嵌套表單驗證

我正在嘗試在角2中使用FormGroup的角材和我在輸入驗證嵌套formControls在不同組件中的問題。提交角材2嵌套表單驗證

我的問題是：提交表單時，只有第一個formGroup中的輸入被通知表單已被提交。

我創建了以下爲例：

@Component({ 
    selector: 'material-app', 
    templateUrl: 'app.component.html' 
}) 
export class AppComponent implements OnInit { 
    public myForm: FormGroup; 

    constructor(private _fb: FormBuilder) {} 

    ngOnInit() { 
    this.myForm = this._fb.group({ 
     nested: this._fb.group({ 
      id: ['', Validators.required] 
     }), 
     id: ['', Validators.required], 
    }); 
    } 
}

我有一個嵌套的FormController簡單formGroup。這是我的HTML：

<form [formGroup]="myForm"> 
    <md-input-container> 
    <input mdInput required formControlName="id"> 
    </md-input-container> 
    <other-component [myFormGroup]="myForm" myFormGroupName="nested"></other-component> 
    <button md-raised-button type="submit">Rechercher</button> 
</form>

其他組件只顯示另一個輸入。

我做了一個plunker來說明：http://plnkr.co/edit/WR0cmVOhIfCdkqAVc8xX

你可以注意到，如果我進入一個領域，退出它向右走，紅色的錯誤線出現在兩個輸入。但是，如果我不接觸任何兩個輸入，並且點擊提交，則只有非嵌套輸入纔會加下劃線。這是因爲嵌套的不能獲取表單提交的信息，即使我將formGroup對象作爲參數傳遞。

任何想法，我該如何解決這個問題？我怎樣才能使第一次輸入意識到提交的表單？

非常感謝！

來源

2017-08-03 Alexis L

在你plunkr，解決它，如果我點擊提交，沒有別的，我看到兩個輸入都用紅色標出。 – ChrisG

對我來說，重新編譯不會，代碼也不同於你的問題... – Alex

對不起，我更新我的plunkr，因爲我的例子實際上是在工作。新的plunkr說明了我的問題，驗證提交isnot工作的情況下嵌套組件 –

Angular不會將mat-input-invalid類添加到您的嵌套控件。讓我們來思考爲什麼？

這裏是類MdInputContainer約束力的樣子：

'[class.mat-input-invalid]': '_mdInputChild._isErrorState',

，這裏是相應的樣式，使您的邊框爲紅色。

.mat-input-invalid .mat-input-ripple { 
    background-color: #f44336; // red 
}

，如果你將研究_isErrorState財產是如何計算的，你可以看到，它會檢查FormGroupDirective.submitted財產。

function defaultErrorStateMatcher(control, form) { 
    var /** @type {?} */ isSubmitted = form && form.submitted; <---- 
    return !!(control.invalid && (control.touched || isSubmitted)); 
}

由於要創建兩個FormGroupDirective指令只有頂級的指令將被提交。

您可以通過使用反應FormControlDirective

other.component.ts

@Component({ 
    selector: 'other-component', 
    template: ` 
     <md-input-container > 
     <input mdInput required [formControl]="control"> 
     </md-input-container> 
    ` 
}) 
export class OtherComponent { 
    @Input() subname: string; 
    @Input() formobj: any; 

    control: FormControl; 

    ngOnInit() { 
    this.control = this.formobj.get([this.subname, 'id']) 
    } 
}

Plunker Example

來源

2017-08-03 19:54:09 yurzui

謝謝Yurzui，這正是我一直在尋找。這裏的要點是我需要將整個FormGroup對象傳遞給我的嵌套組件，而不是僅傳遞子FormGroup對象。首先，我直接通過myForm.get（'嵌套'）作爲我的其他組件的參數將做的伎倆，但不，我的嵌套組件需要一個引用到整個formGroup對象。 –

提交角材2嵌套表單驗證

回答

相關問題