Angular 4控制组验证错误

时间:2017-06-23 09:15:23

标签: angular angular-reactive-forms

我正在使用Angular反应形式构建通用表单。我有一个输入元素的通用Html

<div class="form-input form-group" [formGroup]="group">
    <div class="row">
        <div class="col-2 font-label">
            <label>{{ config.label }}</label>
        </div>
        <div class="col-10">
            <input type="text" [attr.placeholder]="config.placeholder" disabled="disabled" class="form-control"
                [formControlName]="config.name">
            <div [hidden]="!(group.controls[config.name].invalid && group.controls[config.name].touched)">
                <small class="form-text text-danger" [hidden]="!group.controls[config.name]?.errors?.required"></small>
                <small class="form-text text-danger" [hidden]="!group.controls[config.name]?.errors?.minlength"></small>
                <small class="form-text text-danger" [hidden]="!group.controls[config.name]?.errors?.maxlength"></small>
            </div>
        </div>
    </div>
</div>

但对于以下!group.controls[config.name]?.errors?.required,它告诉我Identifier 'required' is not definedminlengthmaxlength也是如此。从哪里我可以获得minlengthmaxlength以及required errors?

2 个答案:

答案 0 :(得分:1)

试试这个

array_length(grouped_cte1.m_ids, 1)

答案 1 :(得分:0)

您可以使用AbstractControl#hasError方法的第二个参数,使用它:

@EActivity(R.layout.activity_pdf_app_bar_main)
@OptionsMenu(R.menu.options)
public class PDFActivity extends AppCompatActivity implements OnPageChangeListener, OnLoadCompleteListener
{
    private static final String TAG = PDFActivity.class.getSimpleName();
    private final static int REQUEST_CODE = 42;
    public static final int PERMISSION_CODE = 42042;
    public static final String SAMPLE_FILE = "myPDF.pdf";
    public static final String READ_EXTERNAL_STORAGE = "android.permission.READ_EXTERNAL_STORAGE";
    private int mCurrentPage = 0;
    private final static String KEY_CURRENT_PAGE = "current_page";
    private ProgressDialog progressDialog;
    @ViewById
    PDFView pdfView;
    @NonConfigurationInstance
    Uri uri;
    @NonConfigurationInstance
    String pdfFileName;
    @OptionsItem(R.id.pickFile)
    void pickFile()
    {
        int permissionCheck = ContextCompat.checkSelfPermission(this, READ_EXTERNAL_STORAGE);
        if (permissionCheck != PackageManager.PERMISSION_GRANTED)
        {
            ActivityCompat.requestPermissions(this, new String[]{READ_EXTERNAL_STORAGE}, PERMISSION_CODE);
            return;
        }
        launchPicker();
    }
    void launchPicker()
    {
        Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
        intent.setType("application/pdf");
        try
        {
            startActivityForResult(intent, REQUEST_CODE);
        }
        catch (ActivityNotFoundException e)
        {
            Toast.makeText(this, R.string.toast_pick_file_error, Toast.LENGTH_SHORT).show();
        }
    }
    @AfterViews
    void afterViews()
    {
        pdfView.setBackgroundColor(Color.WHITE);
        if (uri != null)
        {
            displayFromUri(uri);
        }
        else
        {
            displayFromAsset(SAMPLE_FILE);
        }
        setTitle(pdfFileName);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        if (getSupportActionBar() != null)
        {
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            getSupportActionBar().setDisplayShowHomeEnabled(true);
        }
    }

    private void displayFromAsset(String assetFileName)
    {
        pdfFileName = assetFileName;
        pdfView.fromAsset(SAMPLE_FILE)
                .defaultPage(mCurrentPage)
                .enableSwipe(true)
                .swipeHorizontal(false)
                .enableDoubletap(true)
                .password(null)
                .enableAntialiasing(true)
                .onPageChange(this)
                .enableAnnotationRendering(true)
                .onPageScroll(new OnPageScrollListener() {
                    @Override
                    public void onPageScrolled(int page, float positionOffset) {
                        Log.d(TAG, "onPageScrolled: page " + page + " positionOffset " + positionOffset);
                    }
                })
                .onRender(new OnRenderListener()
                {
                    @Override
                    public void onInitiallyRendered(int nbPages, float pageWidth, float pageHeight)
                    {
                        pdfView.fitToWidth(mCurrentPage);
                    }
                })
                .onLoad(new OnLoadCompleteListener() {
                    @Override
                    public void loadComplete(int nbPages) {
                        Log.d(TAG, "loadComplete: totalPages " + nbPages);
                    }
                })
                .onError(new OnErrorListener() {
                    @Override
                    public void onError(Throwable t) {
                        Log.d(TAG, " onError");
                    }
                })
                .scrollHandle(new DefaultScrollHandle(this))
                .spacing(2)
                .load();
    }
    private void displayFromUri(Uri uri)
    {
        pdfFileName = getFileName(uri);
        pdfView.fromUri(uri)
                .defaultPage(mCurrentPage)
                .onPageChange(this)
                .enableAnnotationRendering(true)
                .onLoad(this)
                .scrollHandle(new DefaultScrollHandle(this))
                .load();
    }
    @OnActivityResult(REQUEST_CODE)
    public void onResult(int resultCode, Intent intent)
    {
        if (resultCode == RESULT_OK)
        {
            uri = intent.getData();
            displayFromUri(uri);
        }
    }
    @Override
    public void onPageChanged(int page, int pageCount)
    {
        mCurrentPage = page;
        setTitle(String.format("%s %s / %s", "Page Number", page + 1, pageCount));
    }
    public String getFileName(Uri uri)
    {
        String result = null;
        if (uri.getScheme().equals("content"))
        {
            Cursor cursor = getContentResolver().query(uri, null, null, null, null);
            try
            {
                if (cursor != null && cursor.moveToFirst())
                {
                    result = cursor.getString(cursor.getColumnIndex(OpenableColumns.DISPLAY_NAME));
                }
            }
            finally
            {
                if (cursor != null)
                {
                    cursor.close();
                }
            }
        }
        if (result == null)
        {
            result = uri.getLastPathSegment();
        }
        return result;
    }
    @Override
    public void loadComplete(int nbPages)
    {
        if (mCurrentPage >= 0)
        {
            pdfView.jumpTo(mCurrentPage);
        }
        PdfDocument.Meta meta = pdfView.getDocumentMeta();
        Log.e(TAG, "title = " + meta.getTitle());
        Log.e(TAG, "author = " + meta.getAuthor());
        Log.e(TAG, "subject = " + meta.getSubject());
        Log.e(TAG, "keywords = " + meta.getKeywords());
        Log.e(TAG, "creator = " + meta.getCreator());
        Log.e(TAG, "producer = " + meta.getProducer());
        Log.e(TAG, "creationDate = " + meta.getCreationDate());
        Log.e(TAG, "modDate = " + meta.getModDate());
        Log.d(TAG, "totalPages " + nbPages);
        printBookmarksTree(pdfView.getTableOfContents(), "-");
    }
    public void printBookmarksTree(List<PdfDocument.Bookmark> tree, String sep)
    {
        for (PdfDocument.Bookmark b : tree)
        {
            Log.e(TAG, String.format("%s %s, p %d", sep, b.getTitle(), b.getPageIdx()));
            if (b.hasChildren())
            {
                printBookmarksTree(b.getChildren(), sep + "-");
            }
        }
    }
    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String permissions[], @NonNull int[] grantResults)
    {
        if (requestCode == PERMISSION_CODE)
        {
            if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED)
            {
                launchPicker();
            }
        }
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item)
    {
        if (item.getItemId() == android.R.id.home)
        {
            finish();
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        if (savedInstanceState != null)
        {
            mCurrentPage = savedInstanceState.getInt(KEY_CURRENT_PAGE);
        }
        else
        {
            mCurrentPage = -1;
        }
    }

    @Override
    protected void onRestoreInstanceState(Bundle savedInstanceState)
    {
        super.onRestoreInstanceState(savedInstanceState);
        mCurrentPage = savedInstanceState.getInt(KEY_CURRENT_PAGE);
    }

    @Override
    public void onSaveInstanceState(Bundle outState)
    {
        super.onSaveInstanceState(outState);
        outState.putInt(KEY_CURRENT_PAGE, mCurrentPage);
    }
}

此外,我建议您使用<small class="form-text text-danger" [hidden]="!group.hasError('required', config.name)"> </small> 代替*ngIf

You can read this for a deep explanation