如何以編程方式顯示mdl-textfield的錯誤消息？

我想在用戶嘗試發送表單時將空字段顯示在數量文本字段上的MDL錯誤消息。領域是這樣的：如何以編程方式顯示mdl-textfield的錯誤消息？

<mdl-textfield 
     #quantityBox 
     type="text" 
     label="Num." 
     pattern="-?[0-9]*(\.[0-9]+)?" 
     error-msg="Insert a number!" 
     [(ngModel)]="selectedBoxQuantity" 
     floating-label 
     class="no-wrap"></mdl-textfield>

我可以訪問到外地組件調用ViewChild：

@ViewChild('quantityBox') private quantityBox: MdlTextFieldComponent;

但很顯然，我只能改變錯誤信息：

this.quantityBox.errorMessage = "New error message";

哪有我強制輸入字段中沒有輸入無效值的消息？

我想什麼來實現與此類似，當我點擊/ TAP +按鈕：

來源

2016-11-18 Michele DC

我'不太清楚你要實現的目標是什麼 - 但這裏是一個解決方案，你可以幫助找出答案。在required屬性添加到mdl-textfield，使error-msg屬性不動產所以角度對其進行評估：

<mdl-textfield 
     required 
     type="text" 
     label="Num." 
     pattern="-?[0-9]*(\.[0-9]+)?" 
     [error-msg]="message" 
     [(ngModel)]="selectedBoxQuantity" 
     floating-label 
     class="no-wrap"></mdl-textfield>

在您組件添加以下代碼：

public message = 'Insert a number!'; 
    public selectedBoxQuantity_: number; 

    get selectedBoxQuantity() { 
    return this.selectedBoxQuantity_; 
    } 

    set selectedBoxQuantity(v: string){ 
    this.selectedBoxQuantity_ = v; 
    this.message = v.length === 0 ? 'Insert a number!' : 'Insert a valid number'; 
    }

這個文本框現在顯示消息「插入一個號碼！'在初始加載時，因爲該字段是必需的，並且消息設置爲「插入數字！」。如果用戶輸入方法selectedBoxQuantity被調用。如果該值仍然爲空，則錯誤消息仍將插入一個數字！如果不是，則錯誤消息設置爲「插入有效號碼」。如果輸入與您的模式不匹配，則會顯示新的錯誤消息。如果輸入是一個數字，錯誤信息就會消失。

來源

2016-11-18 14:46:17 michael

謝謝你的建議：我想要做的是動態添加/刪除「required」屬性。我希望這個文本框只有在用戶點擊+按鈕時才變成紅色，並且它仍然是空的。使用模板中設置的所需「屬性」，該字段在組件初始化後立即變爲紅色。 –

readonly也可以在運行時更改[只讀] ='在您的控制器中的屬性' – michael

'' 暫停錯誤「specialOrder！」： '能」 t綁定到'readOnly'，因爲它不是'mdl-textfield'的已知屬性。' 剛剛更新到angular-mdl 2.4.4 now –

如何以編程方式顯示mdl-textfield的錯誤消息？

回答

相關問題